Attempting to clearly illustrate an issue with a table containing data presented in a thymeleaf template. The table's header consists of a form used for filtering its contents. This problem arises only when the table has minimal content, such as just one record. Here is a snippet of code showcasing this scenario:
<div class="table-responsive">
<form name="filterScanCodes" 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>
The issue at hand reveals itself when the visible options are constrained by the size of the table:
https://i.sstatic.net/zOidS.png
As the table length increases, more options become visible until the full list is shown:
https://i.sstatic.net/OZCqv.png
What dictates this behavior and how can I ensure that all options remain visible at all times? Attempts to address this by setting the overflow property of the selectpicker class to visible have proven unsuccessful.