Question

我有一个可折叠的手风琴面板，它使用单个bootstrap multiselect下拉框进行扩展。它有很多选择。扩展的折叠式面板打开以显示下拉框，但会切断其下方的选项。我已经尝试在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;
}

未折叠面板内的Bootstrap多选下拉列表被切断

1 个答案:

Demo in jsFiddle