Fluid input-append in Bootstrap Responsive

Question

I've been struggling to get an input with an input-append element to have the correct width in a fluid layout. I'm using v2.0.4 of Bootstrap. As I resize to make the page smaller it breaks onto a newline. Ideally I'd have the input the full width of the well (like the alerts). I've included the markup and some screenshots below. Any help much appreciated!

<div class="row-fluid">
    <div class="span3 well">
       <form class="form-horiztonal">
           <h2>Filters</h2>
           <fieldset>
               <div class="control-group">
                   <label class="control-label" for="msisdn">MSISDNs</label>
                   <div class="controls">
                       <div class="input-append">
                           <input class="span10" id="msisdn" size="" type="text" name="msisdn"><button
                           class="btn btn-primary" type="submit"><i class="icon-plus icon-white"></i></button>
                       </div>
                   </div>
                </div>
           </fieldset>
       </form>
    </div>

    <div class="span9"></div>
</div>

Answer 1

Since your input is a .span10, the button should be a .span2.

<div class="input-append">
    <input class="span10" id="msisdn" size="" type="text" name="msisdn"><button class="btn btn-primary span2" type="submit"><i class="icon-plus icon-white"></i></button>
</div>

But the behavior of the button radically changes. You can fix it with this css :

.input-append .btn {
    float: none!important;
    margin-left: 0!important;
}

And to be even more precise, the button should be as large as a .span2 plus the fluidGridGutterWidth. Which is width: 17.02127659% according to the default values.

Answer 2

replace <form class="form-horiztonal"> with <form id="formfilters" class="form-horiztonal">

Add the following jQuery code.

function sizing() {
  var formfilterswidth=$("#formfilters").width();
  $("#msisdn").width((formfilterswidth-46)+"px");
}
$(document).ready(sizing);
$(window).resize(sizing);​

And it allways looks good

Small:

Large:

Answer 3

The responsive css is what's tripping this up.

By overriding some of the responsive css using

  #msisdn {
    width: 75%;
    display: inline-block;
  }

hopefully you can see what's happening. This will get you close enough hopefully.