FR: Control sizing (like Bootstrap)

[nathanpitman]

It would be really nice to have the option of a number of different control sizes (as with Bootstrap). i.e. .input-lg etc.

http://getbootstrap.com/css/#forms-control-sizes

Chosen looks great and would look even more superb in big chunky forms if we could control it's sizing natively. :)

[stof]

Chosen has a width option allowing to set its width: http://harvesthq.github.io/chosen/options.html

I set it to '100%' in my project, meaning that any sizing applied to the container element will be affect the chosen size

[nathanpitman]

Width isn't the issue, the issue is input height/scale. :)

[joseph4tw]

@stof just to side-note: in bootstrap, when the window is resized, so are input elements' widths within fluid containers. But with chosen, '100%' will take the containing element's width after page load apply a fixed size to it. The way I currently get around this is by reapplying the css of the '#myelement_chzn' element after chosen has run.

[stof]

no, if you put 100% in the Chosen options, it will apply the style as 100%, not as a computed value corresponding to 100%

[joseph4tw]

@stof you're right. I thought I updated to the newest chosen release, but I just double-checked and I was still using an old version (which, indeed, did apply a fixed width when specifying a percentage).

[phantom7]

Is there a way to adjust height as well as width? I'm a bit of a Noob. Apologies if I'm asking a silly question as I don't see a "height" option. If there's no clean solution, is there a hack one can suggest?

[stof]

@phantom7 chosen does not set any explicit height inline. If you want to control the height, it is a matter of adding some CSS rules

[philipstratford]

I agree that it'd be nice if Chosen would inherit Bootstrap sizing classes like input-sm and input-lg. At the moment I'm getting around the fact that it doesn't by wrapping selects using Chosen inside elements with form-group form-group-sm, which works, but it's untidy.