隐藏在模式弹出式可滚动部分后面的jQuery multiselect下拉值

时间:2018-10-24 10:36:59

标签: javascript jquery html css

我使用了Jquery multiselect下拉列表,并为可滚动部分设置了模式主体的固定高度。问题是多选下拉菜单隐藏在该可滚动部分的后面,我想将其显示在可滚动部分的顶部。

请检查以下屏幕截图:

enter image description here

HTML代码:

import pandas as pd, numpy as np
from numba import njit

def haversine_pd(lon1, lat1, lon2, lat2):
    lon1, lat1, lon2, lat2 = map(np.radians, [lon1, lat1, lon2, lat2])
    dlon = lon2 - lon1
    dlat = lat2 - lat1
    a = np.sin(dlat/2.0)**2 + np.cos(lat1) * np.cos(lat2) * np.sin(dlon/2.0)**2
    return 6367 * 2 * np.arcsin(np.sqrt(a))

@njit
def haversine_nb(lon1, lat1, lon2, lat2):
    lon1, lat1, lon2, lat2 = np.radians(lon1), np.radians(lat1), np.radians(lon2), np.radians(lat2)
    dlon = lon2 - lon1
    dlat = lat2 - lat1
    a = np.sin(dlat/2.0)**2 + np.cos(lat1) * np.cos(lat2) * np.sin(dlon/2.0)**2
    return 6367 * 2 * np.arcsin(np.sqrt(a))

np.random.seed(0)
lon1, lon2, lat1, lat2 = np.random.randn(4, 10**7)
df = pd.DataFrame(data={'lon1':lon1,'lon2':lon2,'lat1':lat1,'lat2':lat2})
km = haversine_pd(df['lon1'], df['lat1'], df['lon2'], df['lat2'])
km_nb = haversine_nb(df['lon1'].values, df['lat1'].values, df['lon2'].values, df['lat2'].values)

assert np.isclose(km.values, km_nb).all()

%timeit haversine_pd(df['lon1'], df['lat1'], df['lon2'], df['lat2'])
# 1 loop, best of 3: 1.81 s per loop

%timeit haversine_nb(df['lon1'].values, df['lat1'].values, df['lon2'].values, df['lat2'].values)
# 1 loop, best of 3: 921 ms per loop

CSS:模态可滚动部件的高度设置如下

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

jquery:加载时

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

1 个答案:

答案 0 :(得分:0)

使用此类在下面的类来调整您的多选容器,您知道模态的高度,可以指定顶部位置像素的高度。

.multiselect容器 {   位置:固定!重要   top:0px!重要   左:50px!重要 }