Question

我希望我可以清楚地解释这一点。我有一张表格，显示百里香模板中的数据列表。该表的标题是用于过滤其内容的表单。仅当表的内容非常短（仅说一条记录）时，我的问题才会显现出来。这是一些代码来显示它的样子：

<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类的overflow属性设置为可见，但这没用。

Answer 1

当然，在撰写本文后2分钟，我尝试了半随机的方法，我的答案就出来了！我试图设置溢出属性的方向正确，但是我没有正确地将其应用于selectpicker类。需要在基础容器而不是组件本身上设置溢出属性。下面的CSS修复了它：

SELECT domain
FROM websites
WHERE last_crawled_start <= NOW() - INTERVAL crawl_frequency DAY
LIMIT 1

引导选择选项列表仅与基础组件一样长

1 个答案: