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

Answer 1

I have an answer and a new problem to solve.

I have created a function that will search for all input-append and resize them according to their parent().width().

Here:

  function sizeInputs() {
  $(document).find(".input_app").each(function(){  
    var container_width = $(this).parent().innerWidth();
    var btn_width = $(this).parent().find(".btn_app").width();
    // I don't know why but I need to add 25 here...???
    $(this).css('width', container_width-(btn_width + 25));  
  }); 

You only need to class your input's as ".input_app" and related button's as ".btn_app" and placing them in a div.

This works everywhere except in tables. Since the table width is dictated by its element's width, its the egg and the chicken dilemma. If you enlarge the table, it works, but if you reduce its width, it doesn't.

All this can be viewed in Fiddle input-append

If anyone has an idea on how to solve the table resize problem it will greatly appreciated.

Answer 2

This is a pure CSS solution that works awesome, no nasty jQuery/JavaScript for layout purposes.

http://jsfiddle.net/9Ma8V/

The HTML

<div class="inline-button-input">
   <input type="submit" value="Submit"/>
   <div>
      <input type="text"/>
   </div>
</div>

The CSS

input[type=text] {
   width: 100%;
}
.inline-button-input {
   width: 100%;
   float: right;
}
.inline-button-input div {
   overflow: hidden;
   padding-right: .5em;
}
.inline-button-input input[type=submit] {
   float: right;
}

Answer 3

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 4

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.

Answer 5

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.