Select2 dropdown wrong position

Question

I am working with Select2 library (version 4.0.1), but I have strange position of the dropdown of the select. You can see on the image below.

You can see that select2 dropdown overlaps the select area and I can see in the example in the documentation that it should appear at the bottom of the select. Here is my code

<select class="select2">
   <option>--Select--</option>
   <option>Sample Page</option>
</select>

<script>
  jQuery(document).ready(function() {
    jQuery('.select2').select2();
  });
</script>

Any ideas why this is happening?

That looks to be the correct behaviour. The drop-down should show in top of any element beneath it. — Jayden Lawson, Dec 29 '15 at 11:56
I though that too, but It's not the correct behaviour. You can see it on the demo. In my case it's conflict with other css library, so I changed select2 with selectize. — user1952854, Dec 29 '15 at 20:35
Can you add a link to the demo, and if there's a lot of demo's - the specific one? — Jayden Lawson, Dec 30 '15 at 08:57
Yes, here is the link of the demo: https://select2.github.io/examples.html. you can check the first demo - "Single select boxes". — user1952854, Dec 30 '15 at 12:15
Thanks. I still can't see the problem. The first item "-- Select --" in your example is highlighted in blue. The top border of that item seems to be aligned correctly to the bottom of the input. Is the problem that the height of the first item appears to be less than the second item? Both items appear to have their text vertically-aligned. — Jayden Lawson, Dec 30 '15 at 12:41
The select2 dropdown overlaps the select area, where you see the input box, the currently selected value should be visible. Please try switching back to the latest stable version 3.5.3. — Fabian Horlacher, Feb 25 '16 at 09:21

score 3 · Answer 1 · answered Mar 10 '20 at 12:00

In the select2 initialization, add the parent element. If you are using a jquery modal, do not use the modal ID alone, go a level deeper and keep it as dropdownParent, else it will take the whole screen as its position relatively.

var dropdownParentEl = $('#addModal > .modal-dialog > .modal-content')
selectBoxElem.select2({
  dropdownParent: dropdownParentEl,
})

I want my dropdown to be relative within the modal-content, so i kept it as my parent, you change according to its requirement.

Select2 dropdown wrong position

1 Answers1