未折叠面板内的引导多选下拉菜单被切断

Question

我有一个可折叠的手风琴面板，它通过一个引导多选下拉框进行扩展。它有很多选择。展开的手风琴面板打开以显示下拉框，但会切断其下方的选项。我曾尝试在 css 中调整 z-index，但没有奏效。

代码如下：

<div class="panel-collapse collapse">
    <div class="panel-body">
        <p>Category provided by the borrower for the loan request.</p>
        <select class="multiselect" multiple="multiple" name="purpose">
            <option value="car">car</option>
            <option value="credit card">credit card</option>
            <option value="debt consolidation">debt consolidation</option>
            <option value="educational">educational</option>
            <option value="home improvement">home improvement</option>
            <option value="house">house</option>
            <option value="major purchase">major purchase</option>
            <option value="medical">medical</option>
            <option value="moving">moving</option>
            <option value="other">other</option>
            <option value="renewable energy">renewable energy</option>
            <option value="small business">small business</option>
            <option value="vacation">vacation</option>
            <option value="wedding">wedding</option>
        </select>
    </div>
</div>

关于如何让它发挥作用的任何想法？

Answer 1

这与手风琴内容的呈现方式有关。 dynamic content 不会那么热。

为了prevent it from truncating content，可以设置overflow: visisble：

.panel-group .panel {
  overflow: visible;
}

Demo in jsFiddle