Select2 Bug inside a scrollable boostrap 5 Modal (Not dropdown-parent issue)
Hello,
I came across an error that I couldn't find a solution anywhere.
I did some tests and realized that with "pure" bootstrap and select2 this error does not occur.
The error happens when the modal has its content greater than the page, so the page generates the scroll. If there is a "select2" at the end or near the end of the content of this modal that has scroll, it completely positions the selection options of <input>.
(please, open the below image into new tab for full content)
<img src="https://i.postimg.cc/TfKqj2gs/chrome-v-BFb-AVNW1-R.png" />
Replies (11)
Hello Guys, I also have the same issue, is there any solution for it. I am using 8.2 version.
remove tabindex="-1" from modal
also do
<script>
$('#yourdropdownid').select2({
dropdownParent: $('#exampleModal') ////your modal id
});
</script>
Hi,
This is caused to the parent's overflow: auto CSS attribute that making the overflow content scrollable.
Can you please try to use Select'2 data-dropdown-parent="#modal_element_id" as explained in the documentation.
Regards.
Thanks for the answer.
The code already has this property in the printscreen above.
And I tried to put it both as an attribute and as a declaration in the script.
<select class="form-select form-select-solid" data-control="select2" data dropdown-parent="#mmmodal">And the other try like this:
<select class="form-select form-select-solid" >
<script>
$("#select2").select2({
dropdownParent: $("#exampleModal")
});
</script>-------------------------------------------------------------------
I will put the entire code below, which presents the error using Metronic version 8.1.4:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#mmmodal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="mmmodal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" >Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR>...<BR><BR>
<label class="form-label">Email address</label>
<select class="form-select form-select-solid"
data-control="select2" data-dropdown-parent="#mmmodal"
data-placeholder="Select an option" data-allow-clear="true">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</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>Hi,
Can you try to use this workaround:
data-dropdown-parent="body"Regards.
It's works better, but now it doesn't position it up when needed
<img src="https://i.postimg.cc/QtGQcYTk/Z6j-Okz-EEXg.png" />
Could not reproduce this issue. Can you share a test link to your page? What is your OS/Browser version?
I only have it local, but I will upload an copy.
I'm using Windows 10, Google Chrome version 105.0.5195.125
I uploaded the version I'm using.
You will notice that you have two buttons, one with the "dropdown-parent" for the "body" and the other for the "#modal id"
https://5ks.com.br/test/
Thanks again!
It looks like this is Select2's default behavior within the scrollable modal. We double checked our code and confirm that we did not change the Bootstrap Modal's core styles and it works as per the original BS modal. Can you please provide us a test link where the original select2 works fine in such case with bootstrap modal ? Can you confirm that the versions are same the ones we use in Metronic ?
Hi, I had the same issue, a dropdown inside a modal, if the page scrollbar was up to the top, the search box appears fine, but the more I scroll down the page, the lower the search box appears.
I set data-dropdown-parent="body" attribute to the dropdown and just initialize the dropdown with $('#employeeCode').select2() and that was the trick.
