Selectize.js: Bootstrap 3 theme container height

[heruan]

Using the Bootstrap 3 theme applies height: auto on .form-control.selectize-control which mysteriously gets a height of 39px, where the default Bootstrap .form-control has an height of 34px. Having for example two forms side by side this 5px difference is a sensitive issue.

[brianreavis]

The height is set to "auto" so that it can grow vertically when the elements no longer fit on a single line. I'm having troubles reproducing your issue. Here's what I'm getting:

[heruan]

This is an example with two forms side by side: the one on the right has selectized controls which get an height of 39px while the original select controls had an height of 34px (like the inputs on the other form). As you can see now the two forms have not the same height.

[brianreavis]

Can you create a jsfiddle reproducing this? The screenshot doesn't provide enough information. I need to know what property is causing this, whether it's a margin on .selectize-input, extra line-height, etc.

[heruan]

Sure! http://jsfiddle.net/LnRdt/
Also, I noticed selectize Bootstrap 3 theme ignores input size classes (e.g. input-sm, see http://getbootstrap.com/css/#forms-control-sizes).

[msurguy]

@heruan it seems that removing "form-control" class from the selectize elements fixes the issue... See this fiddle: http://jsfiddle.net/msurguy/TKSwn/embedded/result/ does this solve it for you?

[egurelli]

selectize.bootstrap3.css line:153 removing "overflow: hidden;" resolved the issue for me.

[josh18]

As @Heiken said removing overflow: hidden; resolves the issue but perhaps a better solution is to add vertical-align: top; to .selectize-input.

[FabianKoestring]

vertical-align:top; on selectize-input works like a charm!

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.