search

kbrgl / svelte-french-toast

🍞🥂 Buttery smooth toast notifications for Svelte
https://svelte-french-toast.vercel.app/
MIT License
808 stars 28 forks source link

Toast appears in background of native html modal (Dialog element) #42

Open NatumanyaGuy opened 1 year ago

NatumanyaGuy commented 1 year ago

I'm experiencing an issue with svelte-french-toast. When I use the Dialog element (modal), it appears to be positioned behind the dialog instead of on top of it. I suspect that it might be related to the Z-Index. Is there a way it can be resolved?

jeffreycharters commented 11 months ago

I've come up against this as well.

I think that the modal dialog actual gets pulled up in the DOM to the top layer. I don't have a solution, but I believe that's the cause.

jorri11 commented 9 months ago

I have encountered this issue as well, as far as i understand svelte-french toast would have to be changed to be in the topLayer. Something in the topLayer would not be affected by z-index

paulando commented 7 months ago

We have encountered the same issue. Has anyone come across a solution or workaround for this problem? Any shared insights or updates would be greatly appreciated.

yuki0418 commented 7 months ago

Maybe popover attribute can help to move a toaster to top layer? https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover

jorri11 commented 6 months ago

I am a bit unsure if that would help, im not familiar with the popover api. Seems like its browser dependent if the popover appears in the top layer(?)

jeffreycharters commented 6 months ago

I just gave up and used a Melt-UI modal instead and it worked fine and should still be accessible.

jorri11 commented 6 months ago

Yeah thats what im considering too

peter9294 commented 1 month ago

My workaround is to put one more <Toaster/> within dialog itself and it works fine.