Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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)


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)


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



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 ?



remove tabindex="-1" from modal


also do

<script>
$('#yourdropdownid').select2({
dropdownParent: $('#exampleModal') ////your modal id
});
</script>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(