bootstrap-select 选项列表只要底层组件答案

【问题标题】：bootstrap-select option list only as long as underlying componentbootstrap-select 选项列表只要底层组件
【发布时间】：2019-05-06 04:14:08
【问题描述】：

我希望我能清楚地解释这一点。我有一个表格，显示百里香模板中的数据列表。该表的标题是一种用于过滤其内容的表单。只有当表格的内容很短时，我的问题才会显现出来，比如只有一条记录。下面是一些代码来展示它的样子：

<div class="table-responsive">
<form name="fiterScanCodes" th:action="@{'/scanCodes/search'}" method="POST">
    <table class="table table-hover table-striped table-dark">
        <thead>
            <tr>
                <th>Scan Code</th>
                <th>Med</th>
            </tr>
            <tr>
                <th>
                    <input type="text" class="form-control" id="scanCodeFilter" name="scanCodeFilter" th:value="${scanCodeFilter}" 
                        placeholder="Search Scan Code" onchange="this.form.submit()"/>
                </th>
                <th>
                    <select class="form-control selectpicker" id="medFilter" name="medFilter" th:value="${medFilter}"
                        onchange="this.form.submit()" data-live-search="true" title="Select Med"> 
                        <option value="">Search Med</option>
                        <option th:each="med : ${meds}" th:value="${med.id}" 
                            th:text="${med.toString()}" th:selected="${med.id == medFilter}">
                            </option>
                    </select>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr th:each = "scanCode : ${scanCodes}">
                <td th:text = "${scanCode.scanCode}"></td>
                <td th:text = "${scanCode.med.toString()}"></td>
            </tr>
        </tbody>
    </table>
</form>
</div>

我遇到的问题是选项的可见部分仅与表格本身一样长：

随着表格变大，我可以看到越来越多的选项，直到它最终完全出现：

是什么控制了这种行为，我怎样才能一直显示完整的选项列表？我尝试将 selectpicker 类的溢出属性设置为可见，但没有奏效。

【问题讨论】：

标签： html css twitter-bootstrap overflow bootstrap-select

【解决方案1】：

当然，我在写这篇文章 2 分钟后在尝试半随机的事情时找到了答案！我设置溢出属性的尝试正朝着正确的方向前进，但我错误地将其应用于 selectpicker 类。需要在底层容器而不是组件本身上设置溢出属性。下面的 CSS 修复了它：

.table-responsive
{
    overflow: visible;
}

【讨论】：