select2 在灯箱模式中定位遇到问题

Question

使用Select2 4.1，jQuery 3.7

当我在模态/灯箱中显示 select2 时，它无法正确定位自身。

您可以尝试一下并从这里查看源代码：https://deveq.northcarolina.edu/select2.html

当我初始化 select2 时，我确实设置了 dropdownParent。

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

但是，select2代码仍然不知道如何定位select2下拉列表。 通常，项目列表将位于下拉列表的正上方或正下方。但是，在这里，根据我滚动的位置，它可能位于不同的位置。 根据我的观察，它与灯箱底部的距离似乎是应有距离的两倍。

放置的div的一些样式：

#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;
}

Answer 1

解决方案是不依赖现有的父容器，而是创建自己的父容器。 这使得 select2 更容易找到正确的位置。

<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>