Foundation 5 Dropdown Menu Misalign in scrollable table row

Question

I would like to add a dropdown button inside a scrollable table row. I am able to get the dropdown working inside a scrollable table row. However, when you scroll inside the table row, the dropdown menu will misalign.

Here are some screenshots to elaborate.

1. Initial state, when Dropdown Button 1 is clicked.

2. When you scroll the page outside of the table, it works fine.

3. When you scroll the page inside the table row, the dropdown menu misalign.

Please refer to this example in jsbin: http://emberjs.jsbin.com/kuhavenaya/1/edit?html,css,js,output

Click on the Dropdown Button 1, dropdown menu will show up.

• Try scrolling inside the table row and you will see that the dropdown menu will misalign.
• But, when you scroll outside of the table, it will work fine.

Any help and suggestion to solve this issue is much appreciated. Thanks a lot. :)

Answer 1

The problem with the above implementation is that the dropdown menu is relative to the window body and not the dropdown menu container.

Therefore, the solution is to have a position: relative encapsulating the dropdown button.

Here is a working example that fixes the dropdown menu misalign issue.

Thanks~