rgossiaux/svelte-headlessui

[docs] modal not centered on mobile

Opened this issue · 4 comments

eikaramba commented

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

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

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

@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

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