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.