I've encountered an alignment issue with bootstrap select live search (selectpicker). The dropup menu is misaligned when showing search results, but strangely, the alignment corrects itself after scrolling the page. Interestingly, this issue doesn't occur with the dropdown.
My setup includes bootstrap 1.14 beta 3 on bootstrap 5 for .Net 6 MVC.
For visual reference, here are some images:
- Dropdown list with Bootstrap Select
- Dropup misalignment during search
- Dropup aligns correctly after page scroll
I've only used the standard starter code from the bootstrap-select official docs, along with some custom styling.
Select tag
<select class="selectpicker form-control form-control-md"
data-live-search = "true"
asp-items = Model.CountryList>
</select>
Custom CSS
div.dropdown-menu.open {
max-height: 250px !important;
overflow: hidden;
position: relative;
height: auto
}
div.dropdown-menu.inner {
max-height: 200px;
overflow: auto;
}