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.
Related
I am using drupal and super happy with a live edit field module. However this module has been developed with ajax functionality which works brilliantly but seems to still force a button form wrapper fields. I can use CSS to hide this field which works great but the button field ID and wrapper are generic and takes buttons away from the rest of the site. The button wrapper etc are generated by the Drupal CMS of which edits are way out of my scope of understanding.
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Save" class="form-submit"></div>
I am trying to hide with
`
div#edit-actions.form-wrapper {
display: none;
}
`
But this is hiding relevant buttons that need to be used elsewhere in the site. Here is some of the container code.
`
<div class="content">
<div class="view view-account-content view-id-account_content view-display-id-block_1 view-dom-id-b611690449f4a19aecf257c830f8b956 jquery-once-1-processed refresh-processed">
<div class="view-content">
<div class="views-form"><form action="/testdev/" method="post" id="views-form-account-content-block-1" accept-charset="UTF-8"><div><input type="hidden" name="form_build_id" value="form-ycIZQs2NnfOiNp4mkOR_11YB656wl-cYbXdlo8Cidwk">
<input type="hidden" name="form_token" value="phM-fFmZ9Y6mbpN-0fXff-cfwKo5JvbVdmhYt40dyNc">
<input type="hidden" name="form_id" value="views_form_account_content_block_1">
<table class="rwcls2 views-table cols-0">
<tbody>
<tr class="odd rwcls views-row-first views-row-last">
<td class="views-field views-field-name">
admin </td>
<td class="noneed views-field-editablefield">
<div><div id="editablefields-field-company" class="editablefield-item editablefield-processed"><div class="field field-name-field-company field-type-list-text field-label-hidden compbutton"><div class="field-items"><div class="field-item even">C2</div></div></div><input class="editablefield-edit editablefield-edit-hover form-submit ajax-processed" type="submit" id="edit-field-company-0-actions-edit" name="edit-field_company-0" value="Edit this field" style="display: none;">Edit this field</div></div> </td>
</tr>
</tbody>
</table>
<div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="Save" class="form-submit"></div></div></form></div> </div>
</div> </div>
`
Any advise for a new coder would be great. Thanks
I have tried css display none
I have tried adding classes to the field in both form and drupal views
I am try to create a search field with a submit button, where the submit button width is based on it's content, and I try to make the input field width to be fluid, and as max as possible. It's in jQuery mobile.
I've found this solution, and tried to implement it without success. Here is a test JSFIDDLE
I've tried it on a simple html page, and on that it works.
Can somebody point me to where am I made the mistake?
HTML
<div data-role="main" class="ui-content">
<form method="post">
<div class="searchContainer">
<input type="submit" name="search" value="Go" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="term" style="width: 100%;" />
</div>
<input type="hidden" name="op" value="search" />
</div>
</form>
Here comes the content
</div>
add this CSS in your code
.searchContainer > div:first-child {float:right;display:inline-block;}
button will get arranged as per the content.
This is generic solution. You can write it using class name.
Maybe using table will do the job
HTML
<div data-role="page">
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>
<div data-role="header" data-theme="b">
<h1>header</h1>
</div>
<!-- /header -->
<div data-role="main" class="ui-content">
<form method="post">
<div class="searchContainer">
<table style="width: 100%;">
<tr>
<td><input type="text" name="term" style="width: 100%;" /></td>
<td><input type="submit" name="search" value="Go" /></td>
</tr>
</table>
<input type="hidden" name="op" value="search" />
</div>
</form>
Here comes the content
</div>
<div data-role="footer" data-theme="b">
<h1>Copyright © </h1>
</div>
</div>
DEMO HERE
If you want side by side elements without width, remove float and set display:inline-block; to both elements. Or if button have fixed width (eg 70px), use float with calc() for input field width. width: calc(100% - 70px)
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 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>