bootstrap-select 选项列表仅与底层组件一样长

Question

希望我能解释清楚。我有一个 table 在 thymeleaf 模板中显示数据列表。此 table 的 header 是一种用于过滤其内容的表单。只有当 table 的内容很短时，我遇到的问题才会出现，比如只有一条记录。下面是一些代码来展示它的样子：

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

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

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

是什么控制了这种行为，我怎样才能一直显示完整的选项列表？我试图将选择器 class 的溢出属性设置为可见，但没有成功。

Answer 1

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

.table-responsive
{
    overflow: visible;
}

bootstrap-select 选项列表仅与底层组件一样长

bootstrap-select option list only as long as underlying component

html

css

overflow

twitter-bootstrap

bootstrap-select