我在溢出容器中有一个响应表,如
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>
在表的末尾,下拉列表被溢出容器剪切：
正如您所看到的那样,下拉列表使溢出容器垂直滚动,并且在表格的顶部,下拉(或者称为drop up)只是剪切而不滚动：
在只有一行或只有几行的表中,它甚至更成问题：
所以这是我到目前为止尝试解决这个问题：
1.我尝试使用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,其中包含从我的项目中获取的确切代码.
解决方法
根据
this post,你不能使用overflow-x：scroll; overflow-y：visible;,因为可见将永远变为auto：
If you are using
visiblefor eitheroverflow-xoroverflow-yand something other thanvisiblefor the other. Thevisiblevalue is interpreted asauto.
如果这是一个选项,您可以将整个容器设置为溢出：可见;：
.container.uk-overflow-container {
overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.almost-flat.min.css" rel="stylesheet"/>
<br><br><br><br><br>
<div class="container uk-overflow-container bordered-container">
<table class="uk-table uk-table-striped uk-table-hover">
<thead>
<tr>
<th>Name</th>
<th class="uk-text-Nowrap">Adressen</th>
<th class="uk-text-Nowrap">Projekte</th>
<th class="uk-text-Nowrap">Tickets</th>
<th class="uk-text-Nowrap">Intern</th>
<th class="uk-text-Nowrap">Cool</th>
<th class="uk-text-Nowrap">Beschreibung</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Bechtelar,Bergnaum and King</td>
<td class="uk-text-Nowrap"><b>Little Pike 605</b>
<br>352 Howemouth</td>
<td class="uk-text-Nowrap"><a href="#" class="uk-text-muted">Lorem ipsum </a></td>
<td>
<div class="uk-button-group">2</div>
</td>
<td><i class="uk-icon-ban uk-text-danger"></i></td>
<td class="uk-text-Nowrap"><i class="uk-icon-check uk-text-success"></i></td>
<td>Quia soluta numquam harum fuga distinctio cupiditate aperiam. Ipsum iure sequi necessitatibus volupt...</td>
<td class="uk-text-right">
<div class="uk-button-group">
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="">
<i class="uk-icon-eye"></i>
</a>
<div class="uk-button-dropdown" data-uk-dropdown="{mode:'click',boundary:'#fix-dropdowns'}" data-uk-tooltip="" aria-haspopup="true" aria-expanded="false">
<button class="uk-button uk-button-small uk-button-primary">
<i class="uk-icon-angle-down"></i>
</button>
<div class="uk-dropdown uk-dropdown-small uk-dropdown-close uk-dropdown-bottom" style="width: 250px; top: 25px; left: -221px;" aria-hidden="true" tabindex="">
<ul class="uk-nav uk-nav-dropdown uk-text-left">
<li class="uk-nav-header">Kontakt</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-map-marker"></i> Adressen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">4</span> <i class="uk-icon-user"></i> Ansprechpartner
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-credit-card"></i> Kontoverbindungen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">0</span> <i class="uk-icon-key"></i> Zugänge
</a>
</li>
<li class="uk-nav-header">Projekte</li>
<li>
<a href="#">
<i class="uk-icon-university"></i> Projekte
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-check-circle-o"></i> Tickets
</a>
</li>
<li class="uk-nav-header">Buchhaltung</li>
<li>
<a href="#">
<i class="uk-icon-tag"></i> Angebote
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-edit"></i> Aufträge
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-euro"></i> Rechnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-warning"></i> Mahnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-plus-square"></i> Gutschriften
</a>
</li>
</ul>
</div>
</div>
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="" title="Bearbeiten">
<i class="uk-icon-pencil"></i>
</a>
<a href="#" class="uk-button uk-button-small uk-button-danger" data-uk-tooltip="" title="Löschen" data-uk-modal="">
<i class="uk-icon-trash"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>Bechtelar,boundary:'#fix-dropdowns'}" data-uk-tooltip="" aria-haspopup="true" aria-expanded="false">
<button class="uk-button uk-button-small uk-button-primary">
<i class="uk-icon-angle-down"></i>
</button>
<div class="uk-dropdown uk-dropdown-small uk-dropdown-close uk-dropdown-bottom" style="width: 250px; top: 25px; left: -221px;" aria-hidden="true" tabindex="">
<ul class="uk-nav uk-nav-dropdown uk-text-left">
<li class="uk-nav-header">Kontakt</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-map-marker"></i> Adressen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">4</span> <i class="uk-icon-user"></i> Ansprechpartner
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">2</span> <i class="uk-icon-credit-card"></i> Kontoverbindungen
</a>
</li>
<li>
<a href="#">
<span class="uk-badge uk-float-right">0</span> <i class="uk-icon-key"></i> Zugänge
</a>
</li>
<li class="uk-nav-header">Projekte</li>
<li>
<a href="#">
<i class="uk-icon-university"></i> Projekte
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-check-circle-o"></i> Tickets
</a>
</li>
<li class="uk-nav-header">Buchhaltung</li>
<li>
<a href="#">
<i class="uk-icon-tag"></i> Angebote
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-edit"></i> Aufträge
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-euro"></i> Rechnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-warning"></i> Mahnungen
</a>
</li>
<li>
<a href="#">
<i class="uk-icon-plus-square"></i> Gutschriften
</a>
</li>
</ul>
</div>
</div>
<a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="" title="Bearbeiten">
<i class="uk-icon-pencil"></i>
</a>
<a href="#" class="uk-button uk-button-small uk-button-danger" data-uk-tooltip="" title="Löschen" data-uk-modal="">
<i class="uk-icon-trash"></i>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<br><br><br><br><br>