Selectize.js: Bootstrap 3 input-group issue

[DanielLavrushin]

Hi,

selectize does not support form-group bootstrap class. It breaks css formatting.
Please see this example
http://jsfiddle.net/5ewytn3n/

[flamber]

Use the inputClass option to add "form-control" to the class: http://jsfiddle.net/5ewytn3n/1/

[kmmbvnr]

I still have a problem with that

[EmeryEx]

The above fix does make it line up for me, but only until you open the select. Then this:

[johnrork]

@MarshallHouse This was driving me crazy, too, especially when I pasted in @flamber's markup and it worked. I went back and forth trying to spot the difference and it came down to not having the form-control class initially on the selectized element.

Here is a fiddle demonstrating the broken behavior, if you remove the form-control class, it works.

I hope this helps you.

[rmm5t]

@MarshallHouse @johnrork I believe the correct way to solve your particular behavior is to add dropdownParent: "body" to the options passed to selectize:
http://jsfiddle.net/5ewytn3n/13/

[kematzy]

Thanks @rmm5t for saving me time & headache! Your solution works great with BS3 and bootstrap's input-groups form fields.

[ghiotion]

@rmm5t That works if you have a single select, but what if you have a multiple select? The input area doesn't expand. Any ideas for a workaround for that?

[rmm5t]

@ghiotion Not sure. Might be something else, because I have it working in a page with multiple selects.

[diegoazh]

both inputClass: 'form-control selectize-input', dropdownParent: "body" are necesary for obtain the correct visual result.

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