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.
