Selectize.js: Selectize control with .input-group

[redheadedstep]

The selectize control doesn't play nice with an .input-group and .input-group-addon.

The bootstrap 3 css used for input-groups is:

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

which works great except that if you enclose add the .form-control to the select element, it creates havoc when expanding the control. To fix this, omit the form-control class and simply add the following lines into the selectize.bootstrap3.css:

.input-group .selectize-input:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group .selectize-input:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

I've attached images that show the border change.

This is an image depicting using the .form-control class on the select element. I've also seen the input-group-addon button expand to the height of the drop down when using the .form-control class. I think this is because the classes from the select element are copied to the .selectize-dropdown div.

[fran-worley]

Rather than removing the form-control class you can simply set the selectize dropdownParent to 'body' on initialisation.

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