My experience with using Bootstrap-Multiselect and encountering an issue where the dropdown disappears when the outer container has overflow-y: scroll and a max-height has prompted me to seek solutions. I am looking for a way to ensure that the dropdown is displayed over the filter-container.
The HTML structure:
<div class="container filter-container">
<div class="row">
<div class="col-md-12 search-box">
<div class="col-md-12">
<form role="form-inline">
<div class="form-group search-form-group">
<label class="search-label">Users:</label>
<div class="mid-width">
<select class="select-users form-control"></select>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
The CSS style:
.filter-container {
padding: 1%;
border: 1px solid #eee;
max-height: 100px;
overflow-y: scroll;
background-color: #f8f8f8;
}
Javascript handling:
$(document).ready(function() {
$('.select-users').multiselect({
maxHeight: 400,
buttonWidth: '100%'
});
var accounts = [
{ label: 'UserID 1', value: '1' },
{ label: 'UserID 2', value: '2' },
{ label: 'UserID 3', value: '3' },
{ label: 'UserID 4', value: '4' },
{ label: 'All', value: '' }
];
$('.select-users').multiselect('dataprovider', accounts);
});
For more details, check out this Fiddle or visit this link on GitHub addressing a similar issue.