Select2 dropdown not appearing in correct place

Question

I have a select2 multiselect embedded inside a modal, but when I click on the select2 container to make the dropdown appear for the options, the dropdown doesn't appear where it should - rather it is half way up the page. When I zoom out of the page, it appears in the correct place, but zooming back in returns it to the wrong place.

What is the cause of this and what would be the best way to rectify it?

Normal View

Zoomed Out

Some things that I've already tried as suggested by other questions and answers:

Removed tabindex="-1" from the modal
Added style="overflow:hidden;" to <div class="modal-body">
Added dropdownParent to attach the dropdown to the modal dialog, rather than the HTML body
Attempted to change the z value in CSS

Edit I have the following script on my page to fire the select2 container. This one its own causes the dropdown to function correctly.

        document.addEventListener("DOMContentLoaded", function() {
            // Select2
            $("#hazards").each(function() {
                $(this)
                    .wrap("<div class=\"position-relative\"></div>")
                    .select2({
                        placeholder: "Select hazards or search by typing above",
                        dropdownParent: $(this).parent()
                    });
            });
        });

I also have another script that when my select2 changes, pushes results to a different multiselect. The start of the code is this:

window.addEventListener('DOMContentLoaded', () => {
    $('#hazards').select2();
  let hprops = document.getElementById('hp_codes')
//      document.querySelector('#hazards').addEventListener('change', e => {
// The hazards addEventListener was not firing?
  $('#hazards').on('change', e => {
    let options = e.target.options;
    let hazards = [];
    for (var i = 0, l = options.length; i < l; i++) {
      if (options[i].selected) {
        hazards.push(options[i].value);
      }
    }

...  then if hazards results is XXXX push YYYY

When the second code is commented out and just the first, everything works but the results aren't pushed to my second multiselect. When the first is commented out and the second is left alone, it doesn't work as intended with the dropdown displaying out of position. So it looks like a js conflict.

How would I combine the first into the second whilst maintaining the function of the second script?

This one is a little hard to solve without a code example. Try adding a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example), and then I can take a look. — Jeith, Feb 01 '22 at 16:56
While this is just a baseless assumption because I cannot take a look on the code (no reproducible example when I wrote this answer), I think this has something to do with the CSS position property of the select container. I think the select parent container has no "position" property defined, while the select options have "position: absolute" combined with "top: x" properties.. so it jumped up to fit the nearest parent's container which has the "position: relative" property? — artikandri, Feb 01 '22 at 19:08

score 2 · Accepted Answer · answered Feb 01 '22 at 23:29

In the second script the Select2 plugin is re-initiazed with no other options: $('#hazards').select2();

The correct code should be:

window.addEventListener('DOMContentLoaded', () => {
    

 // Select2
 $("#hazards").each(function() {
      $(this)
        .wrap("<div class=\"position-relative\"></div>")
        .select2({
           placeholder: "Select hazards or search by typing above",
           dropdownParent: $(this).parent()
        });
 });


  let hprops = document.getElementById('hp_codes')
//      document.querySelector('#hazards').addEventListener('change', e => {
// The hazards addEventListener was not firing?
  $('#hazards').on('change', e => {
    let options = e.target.options;
    let hazards = [];
    for (var i = 0, l = options.length; i < l; i++) {
      if (options[i].selected) {
        hazards.push(options[i].value);
      }
    }

...  then if hazards results is XXXX push YYYY

Thanks @andreivictor - I thought as much but was a little hesitant at putting the first code straight into the second under `window.addEventListener` as I'm new to `js`. — OT_Edge, Feb 02 '22 at 08:35

Select2 dropdown not appearing in correct place

1 Answers1