I have an advanced search form (click "Advanced search") here in Dupal 7 - http://www.ibuild.ph/mtf-rdp-minimal/search/node and contact form here - http://www.ibuild.ph/mtf-rdp-minimal/contact. The search fields are inline, while the contact fields are positioned below the labels.
Is there a way to inline position the fields with the text labels and make the fields aligned vertically with each other without separating the text labels and form fields in two divs?
Using table
You can change width of label by changing width: 100px;
<table style="width: 100%;">
<colgroup>
<col style="width: 100px;">
<col>
<colgroup>
<tr>
<td>Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" /></td>
</tr>
</table>
Using min-width:
<div>
<label style="display: inline-block; min-width: 100px;">Name: </label><input type="text" />
</div>
<div>
<label style="display: inline-block; min-width: 100px;">Address: </label><input type="text" />
</div>
You could do either of these things:
Make a <table> with two columns instead of your <fieldset>.
Put the <label> elements in the first column and <input/> elements in the second column. The table will automatically align the column widths to the largest element in that column.
OR
You could add this to your css:
fieldset.search-advanced label{
min-width:200px;
}
Thanks, Thi Tran and FactoryAidan. Will try customizing Drupal's webform tpl instead. But your answers will definitely come in handy in customizing the template.
Here is the link to the resource I have found - http://cgit.drupalcode.org/webform/tree/THEMING.txt?id=HEAD
Related
I have a big table and this is the last row of that table:
<tr>
<td>
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
Inside my last td there are two buttons inside forms (is this good way to do it?). What I want to do is to middle align both "Back" and "Delete" buttons so that they look nice. Now it looks like a zigzag (see picture). I've given id or class -tags to those buttons and tried to move them with bottom, left, display, float etc. commands with no results.
I can't make two td's (one td for one button) because there is so much space between td's.
What should I do?
[edit] Here is a jsFiddle to demonstrate. [/edit]
Forms are block-level elements, simply turn them into inline-block and they'll sit nicely side-by-side.
<table>
<tr>
<td>
<form action="index.jsp" method="get" style="display: inline-block;">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post" style="display: inline-block;">
<button type="submit" name="delete" class="deleteButton" value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
</table>
The styling would be better done as part of your stylesheet, but added here as style attributes for simplicity.
You could try something like this:
<tr>
<td style="line-height:30px;">
<div style="height:30px; float:left;">
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
</div>
<div style="height:30px; float:left;">
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</div>
<div style="clear:both;"></div>
</td>
</tr>
Let me know if it works (or not) :)
Simply align form tag with display:inline-block in last-child td
Clarification in fiddle : http://jsfiddle.net/HarishBoke/uHCyU/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm developing an open-source social-network for a student-group &etc.
I want this form to be centred on the page.
My attempt: http://jsfiddle.net/WgSgW/
How do I get it centred? - The closest I've gotten to a working solution is using the offset# classes.
Replace your form container, .span9 with .span12 to fully expand that row across the screen, then simply define your log in table as display:inline-block and text-align:center all the content of your form, like so:
Created my own classes to not mess around with the bootstrap's default values.
CSS
.login {
text-align:center;
}
.center {
*display:inline; /* ie 7 */
display:inline-block;
text-align:left; /* to reset the alignment to the left, container will remain centered */
zoom:1; /* ie7 junk */
}
HTML
<div class="container">
<div class="row">
<div class="span12 login">
<form action="" enctype="multipart/form-data" method="post">
<table class="center">
<tr id="auth_user_email__row">
<td class="w2p_fl"><label for="auth_user_email" id="auth_user_email__label" style="display:none;">Email: </label></td><td class="w2p_fw">
<input class="string" id="auth_user_email" name="email" placeholder="email address" type="text" value="" />
</td><td class="w2p_fc"></td>
</tr>
<tr id="auth_user_password__row">
<td class="w2p_fl"><label for="auth_user_password" id="auth_user_password__label" style="display:none;">Password: </label></td><td class="w2p_fw">
<input class="password" id="auth_user_password" name="password" placeholder="password" type="password" value="" />
</td><td class="w2p_fc"></td>
</tr>
<tr id="submit_record__row">
<td class="w2p_fl"></td><td class="w2p_fw">
<input class="btn btn-large btn-primary" type="submit" value="Signup" />
</td><td class="w2p_fc"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="pagination-centered">
By signing up you are agreeing to our terms & conditions
</div>
</div>
Demo: http://jsfiddle.net/WgSgW/1/
The native way for positioning elements in Twitter Bootstrap is using offset# classes. For your particular case, you can use
<div class="span4 offset4"> ... </div>
Taje a look here
The form is already centered. What you need to do is center the table by applying style margin:0 auto;
this should work.
I have a table, one column of which contains only a checkbox and I am currently centering these with
<td style="text-align:center; vertical-align:middle;">
<input type="checkbox" name="xyz">
</td>
Now I want to add some JS to (de)select all/none, so I want to add a checkbox in my table header row, along with some text
TH is, by default, bold and I am happy leave it so for actual Column header text, bu I was normal text for the "all/none" and then I want a centered checkbox below that.
----------------
| Search ? | Next column
| (all/none) |
| [x] |
here's my code - how do I get that checkbox to center?
<th>Search?<br>
<span class="th_not_bold">(all/none)</span><br>
<input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()">
</th>
try using
<th>
<td style="text-align:center; vertical-align:middle;">
<div>Search</div>
<div class="th_not_bold">(all/none)</div>
<div><input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()"> </div>
</td>
</th>
You would do exactly the same thing you did for your other <td> - you would set text-align center; vertical-align: middle; on the <th>, and you wouldn't need to apply any properties to the checkbox:
Here's an example of the code you'd use:
th{
text-align: center;
vertical-align: middle;
}
You can use text-align:center. Here is what is looks like: http://jsfiddle.net/RcztD/1/
<html>
<head></head>
<style type="text/css">
.center{
text-align:center;
}
</style>
<body>
<table border="1">
<tr>
<th valign="top" class="center">
Search?<br />
<span class="th_not_bold">(all/none)</span><br />
<input type="checkbox" name="search_all" id="search_all onClick="ReportAllNoneClicked()" />
</th>
</tr>
</table>
</body>
</html>
I have this div that is showing the products for an e-commerce site.
I have it well alligned with css and a table inside it, but using tables for content seems to be frowned upon/not the best so I'm trying to do it correctly, hasn't worked out so far. The products div looks like this:
Crude unedited screenshot : http://img255.imageshack.us/img255/6832/printt.png
That is the look I want. I tried nesting 2 divs in the products div, one floating right with the image, title and description, the other one floating right with the table elements.
Thought I had worked it out to a decent look on some pages, but on others (displaying other products) it looks different and messed up. I'm thinking this is due to the fact the links were taking on the width of the whole products div, ending up over the right div.
How do I stop that behavior, I want the links to wrap around the text maybe the problem would go away then. Or are you suggesting something else?
HTML looks like this :
<div id="products">
<img src="fetch.php?id=4" width="129" height="129" alt="PRC200" />
<h3>PRC200</h3>
<table border="0">
<tr>
<td><h4>100,00 RON</h4></td>
</tr>
<tr>
<td class="out">Indisponibil</td>
</tr>
<form action="" method="post">
<tr>
<td><input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /></td>
</tr>
</form>
<form action="detalii.php" method="get">
<tr>
<td>
<input type="hidden" name="id_produs" value="4" />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</td>
</tr>
</form>
</table>
<p>M-am saturat de atatea litere si numere</p>
</div>
Here is a tableless solution. Keep in mind take the tags and place them in an external CSS file. By using a tableless structure you'll see how much more condensed the code is.
<style>
.product { border:1px solid red; padding:10px; }
.productimg { float:left; padding-right:15px; }
.purchasedetails { float:right; padding-left:15px; }
</style>
<div id="products">
<div class="product">
<div class="purchasedetails">
<h4>100,00 RON</h4>
<p>Indisponibil</p>
<input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /><br />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</div>
<div class="productimg"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></div>
<h3>PRC200</h3>
<p class="description">Insert Description Here</p>
<div style="clear:both;"></div>
</div>
</div>
I only have this nexted inside the <div id="products"> because it was listed in your code. The inside products div would essentailly fill whatever content area it is placed in whether it is a <td> or<div>
How can I put <input type="text"/> and <input type="button"/> in one line, like this...
...so that they fit inside their parent (<div> for example), with textbox taking maximal possible width?
Of course, additional divs can be used. tables are allowed but discouraged.
Using a table-based approach, you could:
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><input type="text" style="width:100%"/></td>
<td style="width:60px"><input type="button" style="width:100%"/></td>
</tr>
</table>
The effect is a table that fills its parent width containing a fixed-width button adjacent to a textbox that fills the remaining width.
Of course, out of habit, I would refactor the CSS into an external file.
Edit:
Here's a div-based approach:
It happened to be the case that these div-based approaches worked well enough in IE 7 and IE8, but not Firefox
<div>
<div style="float:right; width:60px">
<input type="button" style="width:100%"/>
</div>
<div>
<input type="text" style="width:100%"/>
</div>
<div style="clear:both"></div>
</div>
And, perhaps, a lighter div-based approach:
<div>
<input type="button" style="float:right; width:60px"/>
<input type="text" style="width:100%"/>
<div style="clear:both"></div>
</div>
I recommend browser-testing div-based approaches.