Bootstrap: Input field widths should be 100% by default.

[skorokithakis]

Is there a specific reason why input field widths are 210px by default? It seems more reasonable that they would take up the full width of the parent div, so we could specify that single width on the grid and have the children elements conform.

Of course, overriding that with the custom span classes would still be an option.

[mdo]

Input fields aren't sized automatically like that—they are meant to have a fixed size applied, unless you apply some CSS3 awesomeness (that doesn't work cross browser) to make it resize to it's parents. Too much overhead right now for that.

[skorokithakis]

Hmm, odd, I set it to 100% and it worked, but I didn't test it very extensively. I wonder if it's easy to create a less mixin on each span that will apply that size to its child input fields, a la:

.span3 input {
    width: 120px
}

[steve-obrien]

Setting to 100% does not work when applied directly to an input field as it does not take in to account the padding. So you end up with 100% of the container plus the padding on the input box, so the input box usually breaks outside its container.

The only way to achieve this is to turn off padding and margin on the input control, set its with to 100% and style a container div like the input box. But then you have to style the interactions (focus, active etc) using javascript.

[skorokithakis]

Ah, I see. How about the span idea, on the non-fluid layout, at least?

[thejamespinto]

I'm having the same problem, can it get hacked with javascript? :(

[assembler]

It can be addressed with css box-sizing property:

input[type=text] { width: 100%; box-sizing: border-box; height: 28px; }

It works in all browsers, and IE8+ (http://dochub.io/#css/box-sizing)

[assembler]

and for older browsers, you can supply "no-padding" fallback

[thejamespinto]

big question, can it come in bootstrap by default?

[assembler]

Dont think so. But it would be easy enough to add new class of form (e.g. .form-elastic) that would match the container size.

[bluemont]

Thanks, @assembler. I searched Bootstrap for uses of "box-sizing" -- which helped me find input-block-level already defined by Bootstrap. (More discussion here: http://stackoverflow.com/questions/11232627/perfect-100-width-of-parent-container-for-a-bootstrap-input)

[Jakobud]

You should be using box-sizing for all block level elements imo. Fixes all sorts of issues with 100% width elements combined with paddings and margins.

[jaseemabid]

@assembler Thanks for the links. Informative :)

[hamidionline]

input[type=text] { width: calc(100% - 16px); box-sizing: border-box; height: 28px; margin:16px }