bootstrap select 下拉菜单无法跟随父项
bootstrap select dropdown can't follow the parent
我使用 bootstrap-select 选择器到 select 选择器选项。当我滚动容器时,顶部 bar.it 的下拉结构没有正确地跟随父元素。
请检查代码笔:https://codepen.io/Arunkarthik07/pen/bjOLYV
.container{
height: auto;
overflow-y: scroll;
}
<div>
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
<div class="container">
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
</select>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</div>
</div>
</div>
删除您的 overflow-y: scroll;
容器样式
那是因为您限制了下拉列表容器的高度。因此,内容将被强制滚动。
将下拉代码更改为:
<select class="selectpicker" data-container="body">
...
</select>
这是您的代码的工作片段:https://codepen.io/anon/pen/wxZrZb。
我没听清楚你的问题。如果您的下拉菜单卡在主体的顶部,则意味着您的下拉菜单中存在 x-out-of-boundaries。请利用此 class 删除转换,以便它可以跟随父元素
//fix
dropdown-menu[x-out-of-boundaries]{
transform: translate3d(0px, 30px, 0px) !important; //give valid transform
//or use visiblity hidden;
}
我使用 bootstrap-select 选择器到 select 选择器选项。当我滚动容器时,顶部 bar.it 的下拉结构没有正确地跟随父元素。
请检查代码笔:https://codepen.io/Arunkarthik07/pen/bjOLYV
.container{
height: auto;
overflow-y: scroll;
}
<div>
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
<div class="container">
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
<option>Mustard</option>
<option>Ketchup</option>
<option>Barbecue</option>
</select>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</div>
</div>
</div>
删除您的 overflow-y: scroll;
容器样式
那是因为您限制了下拉列表容器的高度。因此,内容将被强制滚动。
将下拉代码更改为:
<select class="selectpicker" data-container="body">
...
</select>
这是您的代码的工作片段:https://codepen.io/anon/pen/wxZrZb。
我没听清楚你的问题。如果您的下拉菜单卡在主体的顶部,则意味着您的下拉菜单中存在 x-out-of-boundaries。请利用此 class 删除转换,以便它可以跟随父元素
//fix
dropdown-menu[x-out-of-boundaries]{
transform: translate3d(0px, 30px, 0px) !important; //give valid transform
//or use visiblity hidden;
}