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

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.