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

Question

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

<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 类的溢出属性设置为可见，但没有成功。

Answer 1

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

.table-responsive
{
    overflow: visible;
}