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 .
(please, open the below image into new tab for full content)
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 .
(please, open the below image into new tab for full content)
Replies (9)
Hi,
This is caused to the parent's
Can you please try to use Select'2
Regards.
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.
And the other try like this:
-------------------------------------------------------------------
I will put the entire code below, which presents the error using Metronic version 8.1.4:
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:
?
Regards.
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
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'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!
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 ?
remove tabindex="-1" from modal
also do
also do
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
