Selectize.js: bootstrap 3 input-sm box height

[mparthoens]

with this code:

selectize select box has not the same height that regular bootstrap 3 input-sm box.

solved by overwriting selectize css like this:

.selectize-dropdown, .selectize-input, .selectize-input input {
font-size: 12px;
line-height: 16px;
}

.selectize-input {
min-height: 20px;
}

.form-control.selectize-control {
height: 30px;
}

What is your opinion?

[delfuego]

I'm seeing this same behavior, and would love to have the replacement element for the selectized select element respect the same Bootstrap sizing classes (input-sm on the select, form-group-sm on the form group, etc.).

[delfuego]

I too see this — when my form group is using the class form-group-sm on the form-group, or input-sm on the select that I'm going to selectize, then the replacement, selectized input is taller than other form-group-sm inputs that aren't selectized.

You can see this in this JSFiddle, with the selectized input coming in at 34 pixels tall, vs. 30 pixels tall for all the others on the page.

Is there any existing way to get selectized inputs to respect the Bootstrap input sizing classes?

[delfuego]

Of note, I played around with "fixing" this without delving into Selectize's own CSS, so that I could do it at an app level and (hopefully) not worry about having to deal with this with any Selectize updates; this JSFiddle adds two sets of CSS rules that look to work. The only issue is that it depends on you using the form-group-sm method of changing the sizing of your Bootstrap form inputs, since it targets the descendants of `form-group-smdivs; if you useinput-sm`` on your actual select elements, then it's a harder nut to crack.

[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.