Bootstrap input-append does not work on fluid grid - html

Question

I am trying to use input-append for the search input inside fluid row but unfortunately it does not seem to work correctly as it does not scale to full width of container.
Here is my example piece of code:
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="input-append">
<input class="span12" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
</div>
</div>
</div>
But the input does not scale full width of span12. Does anyone know why this is happening or what am I missing?

Answer 1

Here is a jsFiddle: http://jsfiddle.net/persianturtle/SXcV3/
#appendedInputButton {
width:100%;
}
I also recommend you use the span12 class for the div that holds the input, and not on the input itself.
Update: since bootstrap adds some padding to their buttons for aesthetic reasons, I made the input button width 95% which looks better with no horizontal scroll bar.
Updated jsFiddle: http://jsfiddle.net/persianturtle/SXcV3/1/

Answer 2

for fixed width on the button you can use a different technique
.controls {
position: relative;
}
.input-append{
width: 100%;
}
.input-append input[type="text"]{
position: absolute;
width: auto !important;
margin-right: 42px;
left: 0px;
right: 0px;
}
.input-append button{
width: 42px;
float: right;
margin: 0px !important;
padding: 0px !important;
}
.input-append input[type="text"],
.input-append button{
height: 42px;
-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
-ms-box-sizing: padding-box;
box-sizing: padding-box;
}

Answer 3

There is unnecessary .row-fluid and .span12 div. Correct markup is
<div class="container">
<div class="input-append">
<input class="span12" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
</div>
Working fiddle

Answer 4

I usually try to solve the fluidity problems in Bootstrap by employing the border-box box-sizing model. Something like this recently worked for me:
.input-append{
width: 100%;
}
.input-append input[type="text"]{
width: 90% !important;
}
.input-append button{
width: 10%;
}
.input-append input[type="text"],
.input-append button{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Obviously you'll want to put this all within the scope of your form, but you get the idea.