search

rgossiaux / svelte-headlessui

Unofficial Svelte port of the Headless UI component library
https://svelte-headlessui.goss.io
MIT License
1.79k stars 97 forks source link

[docs] modal not centered on mobile #79

Open eikaramba opened 2 years ago

eikaramba commented 2 years ago

Describe the bug On the official headlessui on mobile the modal is still centered. however here you can also see in the example in the docs that on mobile (using FF) the modal is not centered but on the bottom. i tried to see why but i cannot see any reason or difference why this is the case compared to the official headless ui.

Library version v1.0.0-beta.10

eikaramba commented 2 years ago

of course its not that critical given that you need to style everything yourself anyway. but i guess it would be good to align the docs example as a lot of people might use that as a basis.

for me personally i now fixed it by rewritting the modal dialog not to use the articial space element to align it in the center, but instead i am position the modal absolut and using top & left 50% and transform:translate(-50%,-50%) to position it centered.

rgossiaux commented 2 years ago

I noticed this as well but I also haven't been able to figure out yet why it's any different from the base Headless UI docs.

borisdayma commented 2 years ago

@eikaramba I would be interested in seeing an example on how you use it and make it centered if you have anything available 🙏

eikaramba commented 2 years ago

not using it anymore, but you can see my fix in my comment above.