选择不在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>

我当我使用引导2.3.2和0.9 selectize.js在这它的工作小提琴,但我不能让它与引导3.1.1工作,并在此selectize.js 0.9 小提琴.我甚至试过选择0.10.1,但没有运气.

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

Answer 1

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

dropdownParent: "body"

如果在选择初始化中有此选项,请将其删除.

Answer 2

面板有css样式

\n\n

overflow:hidden;\n

\n\n

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

\n\n

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

\n\n

或者在你的样式表中：

\n\n

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

\n