Popover may be occluded by other elements
Closed this issue · 4 comments
As shown in this example, when passing in a custom element as the button to trigger the popover, sometimes it may be occluded by other elements on the page. With the default button this does not occur, but when passing in a custom button with props it seems to happen frequently.
Can you put together a repl to reproduce?
I had trouble creating a repl to reproduce but it seems like the popout window isn't neccessarily ontop of other elements, and if its inside a table or other element with a smaller size, it gets occluded behind the page. This issue could easily be fixed if the library interfaced a method to adjust the translation of the window manually. The
transform: translate(50%, 50%) translate(0px, 0px)
tries to offset the popover outside of the page, causing the problem. Changing these values in the dev tools fixes the problem completely.
The transform css referenced above positions the popover relative to its natural positioning. From the screenshot you provided it looks like maybe you have an element which doesn't allow overflow. You may want to try adding overflow: visible to that element.
It seems like I had to add overflow: visible to the parent element and remove any overflow autos. Its working perfectly now, thanks for your help!