Input field and submit button on the same line, full width

For a mobile search, I wanted an input field next to a button. I wanted the button to fall to its natural width, and I wanted the input field to be 100% of the remaining width on the line. It’s easy to do with fixed widths, but for fluid-width layouts, it’s harder to do with CSS than you might think.

The key is to apply the magical “overflow” property.

A block that contains a floated element, ordinarily forms an “L” shape, flowing next to and then below the floated element. But when you apply any “overflow” property, you constrain that block so that it sits next to (and never below) the floated element. The block remains a rectangle, not an “L” shape.

Using this, you can put an input field next to a button, let it take up the entire “rest of” the column,  and not worry about about it jumping down below the float on the next line.

Here’s the code to achieve the layout. Styles are inline below, but we all know we should put them into CSS files, right?

<form action="search.php" method="get">
  <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>
</form>
Advertisements
This entry was posted in CSS, Mobile, UI programming. Bookmark the permalink.

18 Responses to Input field and submit button on the same line, full width

  1. Thomas says:

    Thank you for this tip! Great tip for using with jquery mobile form elements!!!!

  2. Marty Mapes says:

    Note: the item receiving the overflow must be a block-level element, not inline.

  3. Cool!! Thank you very much!

  4. Guest says:

    Thank you very much!!! You saved my day.

  5. Great solution!! I’ve been making it work with fixed widths, but being able to do this a good way has been plaguing me for months. Thanks!!

    What didn’t occur to me at first though, is that if you have padding on the left and/or right of your input – even the browser default, you need a padding-right equal to that on the containing div so that it doesn’t actually overflow and get chopped off.

    This just made slicing my designer’s forms 86% easier. 🙂

  6. Thanks man – this tip saved my butt for the beer finding mobile app I’m building

  7. Julius Loa says:

    Only con is that the valign is always top as u use float 😦

  8. donquixote says:

    Only issue is this messes up the tab index..

  9. well, now you can achieve the same with display: flex property

  10. dberror says:

    What can I do if my submit button is located after textfield?

    I can’t use display:flex, because:
    1) not every browser supports it;
    2) in my case it causes problem with submit button’s padding on small screens.

  11. Martin says:

    But what if I need to preserve the order of the inputs to match the layout? For example, instead of the button I have another input which should be fixed width, and the left input before it should take the remaining space. I don’t want to put the right input first in HTML code because this creates problems with tab order and also my Javascript form validation gets confused – it takes the right input as the first one to validate, when I actually need the left one to be validated first.

    Here is my fiddle:
    http://jsfiddle.net/qLypn7h8/

    Can you make it work when is moved after the ?

    • Martin says:

      Sorry, wordpress cut out my HTML code. What I meant was: Can you make it work when time-input is moved after date-input?

  12. Andres says:

    You Rocks!!!

  13. Vahe Marikyan says:

    thanks

  14. Awesome thank you!🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s