uikit下拉列表被溢出容器夹住

Question

我在溢出容器中有一个响应表,如uikit文档中所述:

<div class="uk-overflow-container">
    <table class="uk-table uk-table-striped uk-table-hover">
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>

在td每行的最后一行里面,tbody我有一些下拉按钮:

...
<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文档中boundary描述的选项(自动下拉翻转)

<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,其中包含了从我的项目中获取的确切代码.

Answer 1

根据这篇文章，你不能使用overflow-x: scroll; overflow-y: visible;，因为它visible总是会变成auto：

\n\n

\n

如果您用于visible其中一个overflow-x或以及除另一个overflow-y之外的其他东西。visible该visible值被解释为auto。

\n

\n\n

如果这是一个选项，您可以将整个容器设置为overflow: visible;：

\n\n

\r\n

\r\n

.container.uk-overflow-container {\r\n    overflow: visible;\r\n}

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.min.js"></script>\r\n<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.almost-flat.min.css" rel="stylesheet"/>\r\n<br><br><br><br><br>\r\n\r\n<div class="container uk-overflow-container bordered-container">\r\n  <table class="uk-table uk-table-striped uk-table-hover">\r\n    <thead>\r\n      <tr>\r\n        <th>Name</th>\r\n        <th class="uk-text-nowrap">Adressen</th>\r\n        <th class="uk-text-nowrap">Projekte</th>\r\n        <th class="uk-text-nowrap">Tickets</th>\r\n        <th class="uk-text-nowrap">Intern</th>\r\n        <th class="uk-text-nowrap">Cool</th>\r\n        <th class="uk-text-nowrap">Beschreibung</th>\r\n        <th></th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr>\r\n        <td>Bechtelar, Bergnaum and King</td>\r\n        <td class="uk-text-nowrap"><b>Little Pike 605</b>\r\n          <br>352 Howemouth</td>\r\n        <td class="uk-text-nowrap"><a href="#" class="uk-text-muted">Lorem ipsum </a></td>\r\n        <td>\r\n          <div class="uk-button-group">2</div>\r\n        </td>\r\n        <td><i class="uk-icon-ban uk-text-danger"></i></td>\r\n        <td class="uk-text-nowrap"><i class="uk-icon-check uk-text-success"></i></td>\r\n        <td>Quia soluta numquam harum fuga distinctio cupiditate aperiam. Ipsum iure sequi necessitatibus volupt...</td>\r\n        <td class="uk-text-right">\r\n          <div class="uk-button-group">\r\n            <a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="">\r\n              <i class="uk-icon-eye"></i>\r\n            </a>\r\n            <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">\r\n              <button class="uk-button uk-button-small uk-button-primary">\r\n                <i class="uk-icon-angle-down"></i>\r\n              </button>\r\n              <div class="uk-dropdown uk-dropdown-small uk-dropdown-close uk-dropdown-bottom" style="width: 250px; top: 25px; left: -221px;" aria-hidden="true" tabindex="">\r\n                <ul class="uk-nav uk-nav-dropdown uk-text-left">\r\n                  <li class="uk-nav-header">Kontakt</li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">2</span> <i class="uk-icon-map-marker"></i> Adressen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">4</span> <i class="uk-icon-user"></i> Ansprechpartner\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">2</span> <i class="uk-icon-credit-card"></i> Kontoverbindungen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">0</span> <i class="uk-icon-key"></i> Zug\xc3\xa4nge\r\n                    </a>\r\n                  </li>\r\n                  <li class="uk-nav-header">Projekte</li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-university"></i> Projekte\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-check-circle-o"></i> Tickets\r\n                    </a>\r\n                  </li>\r\n                  <li class="uk-nav-header">Buchhaltung</li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-tag"></i> Angebote\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-edit"></i> Auftr\xc3\xa4ge\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-euro"></i> Rechnungen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-warning"></i> Mahnungen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-plus-square"></i> Gutschriften\r\n                    </a>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            <a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="" title="Bearbeiten">\r\n              <i class="uk-icon-pencil"></i>\r\n            </a>\r\n            <a href="#" class="uk-button uk-button-small uk-button-danger" data-uk-tooltip="" title="L\xc3\xb6schen" data-uk-modal="">\r\n              <i class="uk-icon-trash"></i>\r\n            </a>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      <tr>\r\n        <td>Bechtelar, Bergnaum and King</td>\r\n        <td class="uk-text-nowrap"><b>Little Pike 605</b>\r\n          <br>352 Howemouth</td>\r\n        <td class="uk-text-nowrap"><a href="#" class="uk-text-muted">Lorem ipsum </a></td>\r\n        <td>\r\n          <div class="uk-button-group">2</div>\r\n        </td>\r\n        <td><i class="uk-icon-ban uk-text-danger"></i></td>\r\n        <td class="uk-text-nowrap"><i class="uk-icon-check uk-text-success"></i></td>\r\n        <td>Quia soluta numquam harum fuga distinctio cupiditate aperiam. Ipsum iure sequi necessitatibus volupt...</td>\r\n        <td class="uk-text-right">\r\n          <div class="uk-button-group">\r\n            <a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="">\r\n              <i class="uk-icon-eye"></i>\r\n            </a>\r\n            <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">\r\n              <button class="uk-button uk-button-small uk-button-primary">\r\n                <i class="uk-icon-angle-down"></i>\r\n              </button>\r\n              <div class="uk-dropdown uk-dropdown-small uk-dropdown-close uk-dropdown-bottom" style="width: 250px; top: 25px; left: -221px;" aria-hidden="true" tabindex="">\r\n                <ul class="uk-nav uk-nav-dropdown uk-text-left">\r\n                  <li class="uk-nav-header">Kontakt</li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">2</span> <i class="uk-icon-map-marker"></i> Adressen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">4</span> <i class="uk-icon-user"></i> Ansprechpartner\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">2</span> <i class="uk-icon-credit-card"></i> Kontoverbindungen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">0</span> <i class="uk-icon-key"></i> Zug\xc3\xa4nge\r\n                    </a>\r\n                  </li>\r\n                  <li class="uk-nav-header">Projekte</li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-university"></i> Projekte\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-check-circle-o"></i> Tickets\r\n                    </a>\r\n                  </li>\r\n                  <li class="uk-nav-header">Buchhaltung</li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-tag"></i> Angebote\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-edit"></i> Auftr\xc3\xa4ge\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-euro"></i> Rechnungen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-warning"></i> Mahnungen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-plus-square"></i> Gutschriften\r\n                    </a>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            <a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="" title="Bearbeiten">\r\n              <i class="uk-icon-pencil"></i>\r\n            </a>\r\n            <a href="#" class="uk-button uk-button-small uk-button-danger" data-uk-tooltip="" title="L\xc3\xb6schen" data-uk-modal="">\r\n              <i class="uk-icon-trash"></i>\r\n            </a>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      <tr>\r\n        <td>Bechtelar, Bergnaum and King</td>\r\n        <td class="uk-text-nowrap"><b>Little Pike 605</b>\r\n          <br>352 Howemouth</td>\r\n        <td class="uk-text-nowrap"><a href="#" class="uk-text-muted">Lorem ipsum </a></td>\r\n        <td>\r\n          <div class="uk-button-group">2</div>\r\n        </td>\r\n        <td><i class="uk-icon-ban uk-text-danger"></i></td>\r\n        <td class="uk-text-nowrap"><i class="uk-icon-check uk-text-success"></i></td>\r\n        <td>Quia soluta numquam harum fuga distinctio cupiditate aperiam. Ipsum iure sequi necessitatibus volupt...</td>\r\n        <td class="uk-text-right">\r\n          <div class="uk-button-group">\r\n            <a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="">\r\n              <i class="uk-icon-eye"></i>\r\n            </a>\r\n            <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">\r\n              <button class="uk-button uk-button-small uk-button-primary">\r\n                <i class="uk-icon-angle-down"></i>\r\n              </button>\r\n              <div class="uk-dropdown uk-dropdown-small uk-dropdown-close uk-dropdown-bottom" style="width: 250px; top: 25px; left: -221px;" aria-hidden="true" tabindex="">\r\n                <ul class="uk-nav uk-nav-dropdown uk-text-left">\r\n                  <li class="uk-nav-header">Kontakt</li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">2</span> <i class="uk-icon-map-marker"></i> Adressen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">4</span> <i class="uk-icon-user"></i> Ansprechpartner\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">2</span> <i class="uk-icon-credit-card"></i> Kontoverbindungen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">0</span> <i class="uk-icon-key"></i> Zug\xc3\xa4nge\r\n                    </a>\r\n                  </li>\r\n                  <li class="uk-nav-header">Projekte</li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-university"></i> Projekte\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-check-circle-o"></i> Tickets\r\n                    </a>\r\n                  </li>\r\n                  <li class="uk-nav-header">Buchhaltung</li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-tag"></i> Angebote\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-edit"></i> Auftr\xc3\xa4ge\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-euro"></i> Rechnungen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-warning"></i> Mahnungen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <i class="uk-icon-plus-square"></i> Gutschriften\r\n                    </a>\r\n                  </li>\r\n                </ul>\r\n              </div>\r\n            </div>\r\n            <a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="" title="Bearbeiten">\r\n              <i class="uk-icon-pencil"></i>\r\n            </a>\r\n            <a href="#" class="uk-button uk-button-small uk-button-danger" data-uk-tooltip="" title="L\xc3\xb6schen" data-uk-modal="">\r\n              <i class="uk-icon-trash"></i>\r\n            </a>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n      <tr>\r\n        <td>Bechtelar, Bergnaum and King</td>\r\n        <td class="uk-text-nowrap"><b>Little Pike 605</b>\r\n          <br>352 Howemouth</td>\r\n        <td class="uk-text-nowrap"><a href="#" class="uk-text-muted">Lorem ipsum </a></td>\r\n        <td>\r\n          <div class="uk-button-group">2</div>\r\n        </td>\r\n        <td><i class="uk-icon-ban uk-text-danger"></i></td>\r\n        <td class="uk-text-nowrap"><i class="uk-icon-check uk-text-success"></i></td>\r\n        <td>Quia soluta numquam harum fuga distinctio cupiditate aperiam. Ipsum iure sequi necessitatibus volupt...</td>\r\n        <td class="uk-text-right">\r\n          <div class="uk-button-group">\r\n            <a href="#" class="uk-button uk-button-small uk-button-primary" data-uk-tooltip="">\r\n              <i class="uk-icon-eye"></i>\r\n            </a>\r\n            <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">\r\n              <button class="uk-button uk-button-small uk-button-primary">\r\n                <i class="uk-icon-angle-down"></i>\r\n              </button>\r\n              <div class="uk-dropdown uk-dropdown-small uk-dropdown-close uk-dropdown-bottom" style="width: 250px; top: 25px; left: -221px;" aria-hidden="true" tabindex="">\r\n                <ul class="uk-nav uk-nav-dropdown uk-text-left">\r\n                  <li class="uk-nav-header">Kontakt</li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">2</span> <i class="uk-icon-map-marker"></i> Adressen\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-badge uk-float-right">4</span> <i class="uk-icon-user"></i> Ansprechpartner\r\n                    </a>\r\n                  </li>\r\n                  <li>\r\n                    <a href="#">\r\n                      <span class="uk-bad

        
      
    

归档时间：	9 年，4 月 前
查看次数：	808 次
最近记录：	9 年，4 月 前

CSS overflow-x:visible; 溢出-y:隐藏; 导致滚动条问题 422

更多相关链接

相关归档

如何在HTML工具提示中使用回车符？ 316

用于jQuery或Google CDN的Microsoft CDN？ 186

从超链接中删除所有样式/格式 133

如何仅将特定的CSS规则应用于Chrome？ 97

如何使用外部CSS设置SVG样式？ 84

检测Angular组件外部的单击 75

获得两个json对象的差异 26

使用CSS/Javascript进行图像模糊:是否可能？ 20

{text-indent:-9999} for image replace not working 16

iOS 8 - 如果您在iPad上按Home键并重新登录,键盘会改变颜色 6

难疑归档

"px","dip","dp"和"sp"之间有什么区别？ 5676

如何在JavaScript中检查empty/undefined/null字符串？ 2645

403 Forbidden vs 401 Unauthorized HTTP响应 2544

如何在Python中小写一个字符串？ 1908

什么是移动语义？ 1614

varchar和nvarchar有什么区别？ 1300

在Node.js中读取环境变量 1240

如何找出哪个DOM元素具有焦点？ 1234

忽略git项目中的任何"bin"目录 1172

如何在Ruby中将字符串转换为小写或大写 1081