【发布时间】：2017-06-28 16:29:48
【问题描述】：
我在溢出容器中有一个响应表，如uikit docs 中所述：
<div class="uk-overflow-container">
<table class="uk-table uk-table-striped uk-table-hover">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>
在tbody 每一行的最后一个td 内，我有一些下拉按钮：
...
<td>...</td>
<td>
...
<div class="uk-button-dropdown"
data-uk-dropdown="{mode:'click', pos:'bottom-right'}">
<button class="uk-button">
<i class="uk-icon-angle-down"></i>
</button>
<div class="uk-dropdown uk-dropdown-close">
<ul class="uk-nav uk-nav-dropdown">
<li>...</li>
</ul>
</div>
</div>
</td>
在表格的末尾，下拉菜单被溢出容器截断：
如您所见，下拉列表使溢出容器垂直滚动，并且在表格顶部，下拉列表（或可以说是下拉列表）只是被剪裁而不滚动：
在只有一行或几行的表格中问题更大：
所以这是我迄今为止尝试解决这个问题的方法：
1.我尝试使用boundary 选项，如uikit docs（自动下拉翻转）中所述
<div class="uk-overflow-container" id="fix-dropdowns">
...
<div class="uk-button-dropdown" data-uk-dropdown="{mode:'click', pos:'bottom-right', boundary:'#fix-dropdowns'}">
这应该会向上翻转较低的下拉菜单，但自动翻转仍然是指视口。
我什至将id="fix-dropdowns" 放到不同的父元素中，例如table 或tbody
2.我删除了 uk-overflow-container 类并用一些自己的 css 替换它。
<div style="overflow-x: scroll; overflow-y: visible;">
也不行。
解决方案？
上面的示例省略了一些细节，但我为您准备了一个JSFiddle，其中包含从我的项目中获取的确切代码。
【问题讨论】：
标签： jquery html css drop-down-menu uikit