uikit dropdowns clipped by overflow container

Question

I have a responsive table inside an overflow container like described in the uikit docs:

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

Inside the last td of each row of the tbody I have some dropdown buttons:

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

At the end of the table the dropdowns are clipped by the overflow container:

As you can see the dropdown makes the overflow container scroll vertically and at the top of the table the dropdown (or dropup so to say) is just clipped without scrolling:

It's even more problematic in a table with only one row or just a few:

So here is what I tried so far to solve this:

1. I tried using the boundary option as described in the uikit docs (Automatic dropdown flip)

<div class="uk-overflow-container" id="fix-dropdowns">
   ...
      <div class="uk-button-dropdown" data-uk-dropdown="{mode:'click', pos:'bottom-right', boundary:'#fix-dropdowns'}">

This should flip the lower dropdowns up but the automatic flip still refers to the viewport. I even put the id="fix-dropdowns" to different parent elements like the table or tbody

2. I removed the uk-overflow-container class and replaced it with some own css.

<div style="overflow-x: scroll; overflow-y: visible;">

Also doesn't work.

Solutions?

The examples above omits some details but I prepared a JSFiddle for you with the exact code taken from my project.

Answer 1

According to this post, you cannot use overflow-x: scroll; overflow-y: visible;, as the visible will always become 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.

If that's an option, You can set the whole container to 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>