Having trouble getting a bootstrap multi-select dropdown to work inside a Bootstrap modal. When the modal opens, the following CSS is affecting the dropdown:
select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.selectpicker {
display: none !important;
}
The dropdown is not visible, and removing display: none !important; reveals the options but they do not adhere to the bootstrap/select styling. The dropdown functions correctly when placed outside of the modal.
Here is the code for the modal:
<div class="modal fade bd-example-modal-lg" id="adminModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered " role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="adminModalTitle">Details</h5>
<c:if test="${message != null}">
<p>${message}</p>
</c:if>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post" id="modalForm"></form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="modalSubmit" form="modalForm">Save changes</button>
</div>
</div>
</div>
</div>
Any assistance would be greatly appreciated.
UPDATE: I have attempted to re-initialize .selectpicker using the methods provided in the answers linked here, both on DOM load and when the modal appears, but it did not resolve the issue.