Input text auto width filling 100% with other elements floating

Question

i have the following layout for a search box with:

<div id="emulating_variable_width">
  <form id="srxForm" method="post">
     <div id="qsrxSearchbar">            
         <div id="scope"> Person Name </div>
         <input type="text" id="theq" title="Search">
         <button id="btnSearch" type="button">Search</button>
      </div>
  </form>    
</div>

(its very much simplified for showing purposes)

The title in the 'scope' is a text that can be variable in length

What i will like is to have the input text element to fill all available space (i.e. yellow space), while keeping the search button at the right.

Full example with the CSS is in a fiddle

Which would be the easiest way to accomplish a solution working in IE7+,FF,Safari,etc... ?

Thanks!

I would prefer not using jQuery here, although if there is no other option... yeah — jmserra, Apr 20 '12 at 11:06

score 33 · Accepted Answer · answered Apr 20 '12 at 11:34

33

Like this?

DEMO: http://jsfiddle.net/v7YTT/19/

HTML:

<div id="emulating_variable_width">
   <form id="srxForm" method="post">
       <div id="qsrxSearchbar"> 
           <button id="btnSearch">Search</button>             
           <label id="scope"> Person Name </label>
           <span><input type="text" id="theq" title="Search" /></span>
      </div>
   </form> 
</div>

CSS:

#qsrxSearchbar
{
    width: 500px;
    height: 100px;
    overflow: hidden;
    background-color: yellow;
}

#qsrxSearchbar input
{
    width: 100%
}

#qsrxSearchbar label
{
    float: left
}

#qsrxSearchbar span 
{
    display: block;
    overflow: hidden;
    padding: 0 5px
}

#qsrxSearchbar button 
{
    float: right
}

#qsrxSearchbar input, .formLine button
{ 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

answered Apr 20 '12 at 11:34

Mathew Thompson

55,877
15
127
148

Wohoho! looks like working! but i'm not sure what's the purpose of the last style, the boz-sizing for this example, is that necessary? Tanks a lot – jmserra Apr 20 '12 at 14:15
Not really necessary, it was more of a "just-in-case" usage, it will work without. Making sure everything will fit side by side in all browsers :). – Mathew Thompson Apr 20 '12 at 14:43
You could have at least upvoted my answer if you're going to "repost" it like this.. ಠ_ಠ – thirtydot Apr 20 '12 at 14:59
2

@jmserra: The point of `box-sizing: border-box` is to make sure the `input` fits exactly into the containing `span`. For example, if there's a lot of `padding` or `border` on the `input`: [with `box-sizing: border-box`](http://jsfiddle.net/thirtydot/v7YTT/21/) vs [without](http://jsfiddle.net/thirtydot/v7YTT/22/). – thirtydot Apr 20 '12 at 15:00
@thirtydot I would of, but I'm maxed out votes today! I will tomorrow :). I didn't "repost" your answer, I merely applied your logic to the given solution :) hehe – Mathew Thompson Apr 20 '12 at 15:01
is there a limit of up votings? i had no idea – jmserra Apr 20 '12 at 16:25
1

Yeah lol, 40 in 24 hours, try it, you'll earn the Vox Populi badge :) – Mathew Thompson Apr 20 '12 at 17:17
6

This code works, but "span { display: block }" shows a large misunderstanding of HTML and CSS. – Steve Aug 01 '13 at 13:53

score 1 · Answer 2 · answered Apr 20 '12 at 11:05

hey you can used focus properties in input field as like this

Css

    #emulating_variable_width{
    width:500px;

    height:100px;
    background-color:yellow;
}
input {
    width:auto;
    /*width:100%;*/
    float:left;
    width:100px;
    font-size: 17px;
}
#scope{float:left;}
button{float:left;}

input:focus{
width:200px;
}

HTML

    <div id="emulating_variable_width">
   <form id="srxForm" method="post">
         <div id="qsrxSearchbar">            
             <div id="scope"> Person Name </div>
             <input type="text" id="theq" title="Search">
             <button id="btnSearch" type="button">Search</button>
          </div>
    </form>    
</div>

Live demo http://jsfiddle.net/rohitazad/v7YTT/1/

Hmm, this isn't what i really need, i would like to have the Input Field fill all available remaining yellow width, even if it has no focus — jmserra, Apr 20 '12 at 11:09

score 1 · Answer 3 · answered Apr 20 '12 at 11:13

1

You need something like this:

#emulating_variable_width{
    width:500px;

    height:100px;
    background-color:yellow;
}

input {
    width:320px;
    /*width:100%;*/
    float:left;
    font-size: 17px;
}
#scope{float:left;}
button{float:left;}

answered Apr 20 '12 at 11:13

Hardik Mishra

14,779
9
61
96

3

The point was to do something flexible, a fixed width won't work as the space won't be always 500px and label can change dynamically – jmserra Apr 20 '12 at 14:32

Input text auto width filling 100% with other elements floating

3 Answers3

Linked