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

Question

我在溢出容器中有一个响应表，如uikit docs：

中所述

<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>

在表格的末尾，下拉列表被溢出容器剪切：

正如您所看到的那样，下拉列表会使溢出容器垂直滚动，并且在表格的顶部，下拉（或者说丢弃）只是剪切而不滚动：

在只有一行或只有几行的表格中，问题更严重：

所以这是我到目前为止试图解决的问题：

1。我尝试使用uikit docs中所述的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

根据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>