javascriptcssjquery-select2jquery-select2-4

select2 troubles with positioning in lightbox modal

Using Select2 4.1, jQuery 3.7

When I show the select2 in a modal/lightbox, it does not position the dropdown correctly. When the select is clicked, it should show the dropdown directly above or below the part you click to display the dropdown. It does not, instead showing up as disconnected from the rest of the component, sometimes showing so far from the select that it's not even visible on the screen. See the pictures below.

When I initialized the select2, I did set the dropdownParent.

However, the select2 code still doesn't know how to position the select2 dropdown. Usually the list of items would be either directly above or below the dropdown. However, here, depending on where I scroll, it could be in different places. From my observations, it appears to show up twice the distance from the bottom of the lightbox than the distance it should be.

<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
#lightbox {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    height: 400px;
    margin: -200px 0 0 -350px;
    border: 10px solid #000;
    background: #fff;
    z-index: 9999;
    text-align: left;
    padding:20px;
    overflow: auto;
}

#overlay[id] {
    position: fixed;
}
#overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5000;
    background-color: #000;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity = 80);
}
</style>

</head>


<div id="overlay" style="display: block;"></div>
<div id='lightbox'>
    <p>See Select2 Below<p>
    <p>See Select2 Below<p>
    <p>See Select2 Below<p>
    <p>See Select2 Below<p>
    <p>See Select2 Below<p>
    <p>See Select2 Below<p>
    <p>See Select2 Below<p>
    <p>See Select2 Below<p>
    <p>See Select2 Below<p>
    <p>See Select2 Below<p>
    <p>See Select2 Below<p>
    <p>See Select2 Below<p>
<select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
     <!-- more states -->
    <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
    $('.js-example-basic-single').select2({dropdownParent: jQuery('#lightbox')});
});
</script>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
    <p>Content<p>
</div>

Incorrect positioning of dropdown

Solution

  • The solution is to not rely on the existing parent container, but instead create your own. This makes it much easier for select2 to find the right position.

    <div id='relContainer' style='position:relative'>
  <select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
    <option value="WI">Wisconsin</option>
    // more states
    <option value="WY">Wyoming</option>
  </select>
</div>

<script>
$(document).ready(function() {
    $('.js-example-basic-single').select2({dropdownParent: jQuery('#relContainer')});
});
</script>