When utilizing the choices-js drop-down menu within a Bootstrap 5 responsive table, I am encountering display issues. Specifically, when ID 1 is selected, it appears incorrectly while ID 3 displays correctly.
It is crucial that overflow-x incorporates a scroll bar while overflow-y does not.
However, setting overflow: inherit does not produce the desired outcome.
.table-responsive{ overflow: inherit !important; }
Code Snippet:
let task_data = [
{ value: "1", label: "TASK 100" },
{ value: "2", label: "TASK 101" },
{ value: "3", label: "TASK 102" },
{ value: "4", label: "TASK 103" },
{ value: "5", label: "TASK 104" },
{ value: "6", label: "TASK 105" },
];
new Choices($(`#task_0`)[0], {
position: "bottom",
choices: task_data,
allowHTML: true,
});body {
background-color: #f5f5f5;
}
.table-responsive {
overflow-y: visible!important;
}
#calplaceholder {
max-height: 400px;
height: auto!important;
min-height: auto!important;
}
.cal-viewmonth,
.cal-toprow,
.cal-toprow-pro td:first-child {
text-align: center;
vertical-align: middle !important;
font-weight: 600 !important;
}
.cal-toprow {
font-size: 0.8rem;
width: 162px;
min-width: 162px;
color: #3e5569;
background-color: #F7F9FB!important;
border: 1px solid #CCCCCC;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.1.0/choices.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.1.0/choices.min.js"></script>
<div class="row mt-5 justify-content-center">
<div class="col-sm-11 col-md-8">
<div id="calplaceholder" class="table-responsive bg-white p-3">
<table class="table table-striped table-bordered cal-borders">
<thead>
<tr>
<th class="cal-toprow">1</th>
<th class="cal-toprow">2</th>
<th class="cal-toprow">3</th>
<th class="cal-toprow">4</th>
<th class="cal-toprow">5</th>
<th class="cal-toprow">6</th>
<th class="cal-toprow">7</th>
<th class="cal-toprow">8</th>
<th class="cal-toprow">9</th>
<th class="cal-toprow">10</th>
<th class="cal-toprow">11</th>
<th class="cal-toprow">12</th>
<th class="cal-toprow">13</th>
<th class="cal-toprow">14</th>
<th class="cal-toprow">15</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<select id="task_0" class="form-select"></select>
</td>
<td class="p-0"></td>
<td class="p-0">
<div id="task_1">
<select class="form-select">
<option value="1">TASK 100</option>
<option value="2">TASK 101</option>
<option value="3">TASK 102</option>
<option value="4">TASK 103</option>
<option value="5">TASK 104</option>
<option value="6">TASK 105</option>
</select>
</div>
</td>
<td class="p-0"></td>
<td class="p-0"></td>
<td class="p-0"></td>
<td class="p-0"></td>
<td class="p-0"></td>
<td class="p-0"></td>
<td class="p-0"></td>
<td class="p-0"></td>
<td class="p-0"></td>
<td class="p-0"></td>
<td class="p-0"></td>
<td class="p-0"></td>
<td class="p-0"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>