CODEWITHSUNDEEP
twitter-bootstrap
Toby Cronin
Toby Cronin

Reputation: 558

Fluid input-append in Bootstrap Responsive

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>

enter image description here

enter image description here

Upvotes: 14

Views: 20969

Answers (5)

sidneydobber
sidneydobber

Reputation: 2910

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;
}

Upvotes: 1

fled
fled

Reputation: 161

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.

Upvotes: -1

baptme
baptme

Reputation: 10092

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:

enter image description here

Large:

enter image description here

Upvotes: 4

Sherbrow
Sherbrow

Reputation: 17379

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.

Upvotes: 11

Declan Cook
Declan Cook

Reputation: 6126

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.

Upvotes: 2

Related Questions