Ensure there is enough space above a menu before flipping

[Sotiris-k]

Describe the bug If you define a headerMenu which lists which columns want visible or not, a large percentage of the container of said menu appears off-screen

Tabulator Info 5.4.4

Working Example https://jsfiddle.net/xkq06pcs/1/

To Reproduce

1. Click the dotted horizontal line on the first column to display the headerMenu
2. See that the container mostly appears off screen

Expected behavior The container of the headerMenu should entirely appear on screen

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome & Edge
• Version: Latest for both

Additional context The CSS "top" attribute is incorrectly calculated when there are a certain number of columns present. The bug does not happen for a small number of columns. So far I've been able to reproduce it by using more than 7 columns. Perhaps the number of columns is mostly irrelevant but it was the only way for me to reproduce it.

[olifolkerd]

Hey @Sotiris-k

This is because in your example the menu element is appended to the document body, and you have made a menu that is longer than the table, because you have nothing else on the page and the body has no min height set on it it finished just below the table, which meant the menu then wraps to point up as it cannot fit on the bottom of the table.

In your case the solution is to set a min-height on the body so that there is enough space for the menu.

That being said, i could add a check to see if there is enough sapce above the element before it triggers the menu flip.

Cheers

Oli :)

[Sotiris-k]

Hi @olifolkerd

That's indeed what happens!

Thank you for your fast reply! I'll make sure there's always enough space for the menu to appear correctly.

Regards, Sot