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.

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.