Why do my Twitter Bootstrap form fields overflow their well using fluid container?

Question

UPDATE: Demo of problem here: http://jsfiddle.net/fdB5Q/embedded/result/

From about 767px to 998px, the form fields are wider than the containing well.

Smaller t

Answer 1

Usually I prefer to use another class="row-fluid" and class="span12" in elements with class="spanX" to get 100% width of some element. That will not cause bugs on different resolutions. So, I've added another row-fluid class in your element with span4 class, and inside that new row-fluid added div with span12. You must somethimes override default Bootstrap settings to get what you need, so I've added also class .my-input inside <input /> element to get 100% width and remove left and right padding (padding will cause bug on right side). And here is code:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
            <p>Some Content.</p>
        </div>
        <div class="span4 well">
            <div class="row-fluid">
                <div class="span12">
                    <label class="control-label" for="name">Your Name</label>
                    <input type="text" class="my-input" name="name" id="name" maxlength="100" />
                </div>
             </div>
        </div>
  </div>
</div>

and CSS class for override

​.my-input
{
    width: 100%;
    padding: 4px 0 4px 0 !important;
}​

You can see and Jsfiddle demo, try to resize screen.

​

Answer 2

Just a bit of input after playing with these FOREVER (it seems). I use a simple width attribute and set it to between 85% and 95% depending on the container, padding and other css factors to keep the input fields from actually stretching to edge of the container.

.input-example {
   width: 90%; 
}

I AM NOT AN EXPERT AT THIS! I am just offering what I have learned and please do not take this as advice from a seasoned developer. Trying to give a little back to a community that has saved my life on countless occasions.

Answer 3

I ran across this problem with form inputs and panel body. I answered it in the following item: Twitter Bootstrap: Stop input field extending beyond well

The problem for me was that the form was overflowing. This allowed the inputs to follow suit. By fixing the max-width of the form (max-width: 100%) I was able to fix inputs as well as any other content that may be placed inside the form.

Answer 4

The problem is more insidious than all this to get right, unfortunately. Using max-widths did nothing for me. And I hate things looking crappy, so I dug into it a little...

It comes down to these three lines in the css declaration of a form-control:

width: 100%;
padding: 6px 12px;
border: 1px solid #cccccc;

When the width of an text-type input element is set, the horizontal padding and border are added to the 100% instead of taken from it. So, if the 100% width w were say, 500px, then the width of the text input form control becomes w+12+12+1+1, 526px. The extra 26px are a constant which means unless the width percentage is calculated dynamically either as 100%*(w/(w+26px)) or 100%-26px, things will never come out even.

I personally believe this is an error in either the definition or implementation of the html/css interface (I don't know which, I really don't want to try to find the references in the shifting sands of the standards.) If you say an input field is going to be 100% width, then the correction needs to be applied to make the width inside the margins be 100%, not 100% without the horizontal padding and border widths included.

And, by the way, percentage value or fixed size doesn't matter; they're also off by 26px. You need to filter out these 26px from the width.

All is not lost for bootstrap textual inputs though, at least if you're using a CSS compiler that allows client side calculations. In less, for instance

input.form-control[type=text] {
  width: calc(~'100%-26px');
}

will make it all better. Note that email and password types (at least) have the same problem too.

26px is kind of brittle, of course, but the constants are hardcoded into the form-control declaration, so your hands are kind of tied. A test would be nice that checked the sizes of controls on rendering to catch CSS declaration changes on bootstrap upgrades, but not tonight, thank you.

Answer 5

The input html tags and their corresponding .input-* styles only set the css width. This is by design.

But adding a css max-width:100% will ensure that too large inputs are kept under control.
e.g. add this to your Head:

<style>
    input {
        max-width: 100%;
    } 
</style>

Answer 6

I just came across this issue and a on checking the bootstrap docs for form inputs it states 'Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.'

My bootstrap row was set to span9 for content and span3 for the sidebar. Setting <input class='span3'/> solved the issue for me, the input boxes remain within the sidebar as the screen size reduced.