jquery – 由溢出容器修剪的uikit下拉列表

我在溢出容器中有一个响应表,如 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 visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto.

如果这是一个选项,您可以将整个容器设置为溢出：可见;：

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

原文链接：https://www.f2er.com/jquery/178200.html

jquery – 由溢出容器修剪的uikit下拉列表

解决方法

猜你在找的jQuery相关文章