Selectize not working inside Bootstrap panel

Question

I'm using selectize.js 0.10.1 with Bootstrap 3.0.1 in my project. When I have selectize combobox outside the collapsible Bootstrap panel, everything works great as you can see in the picture.

Working code:

<section class="container">
    <div class="row" style="margin-bottom: 20px">
        <div class="col-lg-4">
            <select id="zastoj" placeholder="Razlog zastoja" class="demo-default selectized"></select>
        </div>
    </div>
</section>

When I have selectize combobox inside the collapsible panel, the combobox can not be opened/expanded on click, it looks like it's read-only.

Non-working code:

<section class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Operacije</h3>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
            </div>
        </div>
    </div>
</section>

I got it to work when I use Bootstrap 2.3.2 and selectize.js 0.9 in this fiddle, but I can't get it to work with Bootstrap 3.1.1 and selectize.js 0.9 in this fiddle. I even tried selectize 0.10.1, but no luck.

Can this be solved or is it some kind of version problem? I need to use Bootstrap 3.0+ in my project.

Shipe

Answer 1

I know I'm a little late to the party, but I had a similar problem when selectize was initialized with the option:

dropdownParent: "body"

If you have this option in your selectize initialization, remove it.

Coshow

Thanks. It was a great solution. You saved the day! – Aborning

Answer 2

The panel has the css style

overflow:hidden;

That is what keeps the selectize control from showing. You can either hard code the style or add it to your stylesheet.

<section class="container">
<div class="panel panel-primary" style="overflow:visible;">
    <div class="panel-heading">
        <h3 class="panel-title">Operacije</h3>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            <select id="zastoj2" placeholder="Razlog škarta" class="demo-default selectized"></select>
        </div>
    </div>
</div>
</section>

or in your stylesheet:

.panel, .panel-default, .panel-primary {
    overflow: visible;
}

Comestible

Answer 3

For those that are using selectize.js along with AngularJS, make sure the <select> is not inside a <div ng-if="..."> ... </div> cause it will not work. Instead, use ng-show and ng-hide instead. This also covers the scenario where a <select> is contained within a modal.

Example:

<!-- This won't work -->                                
<div ng-if="condition == true">
    <select id="my-selectize"></select>
</div>

<!-- This will work -->                             
<div ng-show="condition == true">
    <select id="my-selectize"></select>
</div>

Watering