溢出容器剪辑的uikit下拉列表
Posted
技术标签:
【中文标题】溢出容器剪辑的uikit下拉列表【英文标题】：uikit dropdowns clipped by overflow container 【发布时间】：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，其中包含从我的项目中获取的确切代码。
【问题讨论】：
【参考方案1】：根据this post，你不能使用overflow-x: scroll; overflow-y: visible;，因为visible总是会变成auto：
如果您将
visible用于overflow-x或overflow-y，而将visible以外的其他内容用于另一个。visible值被解释为auto。
如果这是一个选项，您可以将整个容器设置为overflow: visible;：
.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', pos:'bottom-right', 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, 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', pos:'bottom-right', 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, 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', pos:'bottom-right', 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, 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', pos:'bottom-right', 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, 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', pos:'bottom-right', 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>【讨论】：
以上是关于溢出容器剪辑的uikit下拉列表的主要内容，如果未能解决你的问题，请参考以下文章
当容器的位置每次都可以改变时，有没有更好的方法从下拉列表中选择一个项目