javascript - 隐藏在模态弹出可滚动部分后面的jQuery多选下拉值

Question

我使用了 Jquery 多选下拉菜单并为可滚动部分设置了模态体的固定高度。问题是多选下拉菜单隐藏在可滚动部分的后面，我想将它显示在可滚动部分的顶部。

请检查下面的屏幕截图：

html代码：

<div class="form-group">
    <label class="multiChkLbl required">Biological measures</label>
    <select id="multiChkBioMasures" class="form-control" name="bioMasures" multiple="multiple" value="${IdentifierData.identifier66}">
        <option value="Density">Density</option>
        <option value="Abundance">Abundance</option>
        <option value="Size">Size</option>
        <option value="Distribution/home range">Distribution/home range</option>
        <option value="Biodiversity">Biodiversity</option>
        <option value="Food web/energetics">Food web/energetics</option>
        <option value="Recruitment">Recruitment</option>
    </select>
</div>

CSS：模态可滚动部分高度设置如下

height: 300px;
overflow-y: auto;
overflow-x: hidden;

jquery：加载中

$("#multiChkBioMasures").multiselect();

标签： javascriptjqueryhtmlcss

Answer 1

使用下面的这个类来调整您的多选容器，您可以根据可以提供顶部位置像素的高度知道模态的高度。

.multiselect-container { position:fixed !important top:0px !important left:50px !important }