The action overflow menu in a data-table is going below pagination

[bikashp2023]

Describe the bug

Couple of issue are there: 1- The overflow menu is going under the pagination option. 2- There is a large gap between the last row of the table and the pagination option.

Here is the snap taken from storybook.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[brian-patrick-3]

This seems to need two different considerations:

1. We need to prevent the closed menu from taking up space.
2. When used within a container with overflow: scroll/auto, like the data table, the menu opens within the scrollable area, potentially hidden. We can add an option to used position: fixed instead of absolute, but that will have some caveats of it's own we need to be careful of. This is because position: fixed will make the menu relative to the window, rather than the anchor.

[brian-patrick-3]

I changed the animation to use transform: scale so it has no height when hidden. I also added a fixed prop that you can enable, but I would recommend trying without it first.

[brian-patrick-3]

:tada: This issue has been resolved in version 1.1.14 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[bikashp2023]

Hi @brian-patrick-3, this mostly resolves the issue except in the last row; where the overflow goes under pagination and dragging it up brings the white space.

[brian-patrick-3]

Hi @brian-patrick-3, this mostly resolves the issue except in the last row; where the overflow goes under pagination and dragging it up brings the white space.

That's correct. With relative absolute positioning, the menu renders within the scrollable container. The only way around that is to use the new fixed property, which has it's own caveats that I mentioned already.