search

6eDesign / svelte-calendar

A lightweight datepicker with neat animations and a unique UX.
https://6edesign.github.io/svelte-calendar/
MIT License
543 stars 90 forks source link

Popover may be occluded by other elements #118

Closed DrewRidley closed 3 years ago

DrewRidley commented 3 years ago

image

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.

6eDesign commented 3 years ago

Can you put together a repl to reproduce?

DrewRidley commented 3 years ago

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.

6eDesign commented 3 years ago

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.

DrewRidley commented 3 years ago

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!