选择不在Bootstrap面板内工作

Question

我在我的项目中使用了selectize.js 0.10.1和Bootstrap 3.0.1。当我在可折叠的Bootstrap面板外面选择组合框时，一切都很有效，如图所示。

工作代码：

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

当我在可折叠面板内选择组合框时，组合框无法在点击时打开/展开，它看起来像是只读的。

非工作代码：

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

当我在这个fiddle中使用Bootstrap 2.3.2和selectize.js 0.9时，我得到了它的工作，但我无法使用Bootstrap 3.1.1和selectize.js 0.9 in这fiddle。我甚至试过选择0.10.1，但没有运气。

这可以解决，还是某种版本问题？我需要在我的项目中使用Bootstrap 3.0+。

Answer 1

我知道我参加派对有点晚了，但是在使用选项初始化selectize时我遇到了类似的问题：

dropdownParent: "body"

如果您在选择初始化时有此选项，请将其删除。

Answer 2

面板具有css样式

overflow:hidden;

这就是阻止选择控件显示的原因。您可以对样式进行硬编码或将其添加到样式表中。

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

或在样式表中：

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

Answer 3

对于那些使用selectize.js以及AngularJS的人，请确保<div ng-if="..."> ... </div>不在ng-show内，因为它不起作用。相反，请改用ng-hide和<select>。这也涵盖了模式中包含<!-- 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> 的情况。

示例：

{{1}}