[Solved]: Select2 Not Working in Bootstrap Modal
Select2 is a popular jQuery plugin that transforms standard HTML select elements into enhanced dropdowns with additional features such as search functionality, tagging, and loading data dynamically.
It helps improve user experience, especially when dealing with large datasets in select options and also the aesthetics of select inputs.
However, you are likely to encounter issues when using Select2 within a Bootstrap modal whereby the dropdown options tend to appear behind the modal or get cut off.
Below is an example code of Select2 on Bootstrap Modal.
<!DOCTYPE html>
<html>
<head>
<title>Select2 on Bootstrap Modal</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="myModalLabel">Country Setting</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-group">
<select class="form-control" id="country" style="width: 100%;">
<option value="">Select your country</option>
<option value="US">United States of America</option>
<option value="UK">United Kingdom</option>
<option value="ZA">South Africa</option>
<option value="KE">Kenya</option>
<option value="IN">India</option>
<option value="CN">China</option>
<option value="CA">Canada</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(function(){
$('#country').select2();
});
</script>
</body>
</html>
Click the button below to open the modal.
This issue occurs because Bootstrap modals have a high z-index value by default as a way to ensure they appear on top of all other elements outside of the modal.
This high modal z-index causes conflicts with Select2's dropdown container because Select2 by default attaches the dropdown menu to the <body> element thus considered "outside of the modal" and ultimately appearing behind the modal.
The Solution
The solution is to attach the dropdown to the modal itself by using the dropdownParent setting in the Select2 initialization as below:
<script>
$(function(){
$('#country').select2({
dropdownParent: $('#myModal')
});
});
</script>
In the above code, we have used the modal's ID attribute value (#myModal) as the selector in the dropdownParent property which now causes the dropdown to be attached to the modal and the problem is solved.
Click the button below to open the modal and test.
That's it!
With this solution, you can now fix the issue you have been experiencing. It's my hope you found this article helpful.
