Set modal to full height on mobile

Ask us anything
1

We’re to set modal to height: 100% on mobile. however, when the bottom nav URL bar is expanded, modal content lands behind the open URL bar. anyone have any suggestions? we’ve also tried height: 100vh and that doesn’t help

thanks much!

2

If I was you I’d try the new dvh unit for this purpose, it should resize based on the available viewport (depending on the navbar and other UI on mobile), I haven’t had the occasion to try it yet, so I might be wrong :slight_smile: Try it out and let us know!

Reference:

1 Like
3

thanks @Broberto i’ll take a look now and let you know if I have any success!

4

for anyone interested, here is the solution that worked for me:

as @Broberto recommended, height: 100dvh; helps configure height dynamically. very important note: make sure to position the modal ‘top middle’, otherwise even with dvh your content will go off screen.