Twitter bootstrap login adds full width

Question

Currently using bootstrap-2.1.1

I have a row-fluid that contains 2 columns, and inside these columns I have input-prepends. Here is a sample code:

 <div class="row-fluid"> <div class="span6"> <ul> <li> <div class="input-prepend box-shadow"> <span class="add-on">email</span> <input type="text" name="email" value="" placeholder="Edit email"/> </div> </li> </ul> </div> <div class="span6"> <ul> <li> <div class="input-prepend box-shadow"> <span class="add-on">name</span> <input type="text" name="name" value="" placeholder="Edit name"/> </div> </li> </ul> </div> </div> 

YOU CAN SEE JSBIN HERE: http://jsbin.com/unuruh/1/

PROBLEM

How can I make the input widths of the full width (and resize with the browser) of the parent input-prepend using preferred CSS only ? Keep in mind that the add-on value must be the same width ...

Thanks in advance for your help.

Answer 1

Spills of fluid

Here is the approach: Demo (jsbin)

 <li> <div class="row-fluid"> <div class="input-prepend box-shadow clearfix" style="border-radius: 3px;"> <span class="add-on span2" style="width: 14.2%;float: left;">email</span> <input class="span1" style="width: 85.8%;float: left;border-right: 0;border-tradius: 0;border-bottom-right-radius: 0;" type="text" name="#" value="#hello" placeholder="Edit project"/> </div> </div> </li> 

width and float should override what responds to span s behavior, the rest of the inline style is to make the field a bit prettier.

A similar question arises without any problems with the shell: Injecting fluid - adding Bootstrap in the answer

---

Absolute positioning

Update version 2.3: you need .input-fullwidth { display: block; } .input-fullwidth { display: block; } , Updated demo (jsfiddle)

Another approach would be with absolute positioning: Demo (jsfiddle)

 .input-prepend.input-fullwidth { position: relative; } .input-prepend.input-fullwidth .add-on { width: 40px; } .input-prepend.input-fullwidth .input-wrapper { position: absolute; display: block; left: 51px; /* 40 + 2*5 - 1 */ right: 0; top: 0; bottom: 0; } .input-prepend.input-fullwidth .input-wrapper input { width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

 <div class="input-prepend input-fullwidth"> <span class="add-on">email</span> <div class="input-wrapper"><input type="text" name="#" value="#hello" placeholder="Edit project"/></div> </div> 

---

Ultimately you can look for the flexbox CSS3 function (w3.org)