Set modal height to 100dvh

Ask us anything
1

perhaps I’m missing something obvious, but I don’t see a way to set the modal height itself

image
image302×728 25.5 KB

on mobile, the default modal element appears to be set to 100% height so content is hidden behind navigation bars when they’re expanded. to solve previously, we placed a flexbox within the modal and set the flexbox height to 100dvh. this works because the flexbox never goes off screen, however, the modal onBackgroundClick doesnt work since the flexbox is always in front of it.

is there a way to update the modal height itself to equal 100dvh? the custom css display option is not showing for us. @aurelie @Alexis @luka thanks in advance! :pray:

3

Hey
Its a good idea, we should update our modal component
I am opening a ticket on our side

1 Like
4

Amazing, would be such a big help, @aurelie and open doors for everyone optimizing for mobile. Appreciate all you and your team are doing.

5

Its in production, let me know if this is resolving your problem :slight_smile:

6

awesome, @aurelie thank you … i don’t see any configs, so I assume this 100dvh change was made natively within the modal component?

unfortunately, i’m still seeing the modal from bottom appearing behind the nav bar (see below)

image
image365×663 69.1 KB

7

Yes i internally change the css of the modal to be position in dvh. Did you republish?

1 Like
8

sorry, amateur move by me :slight_smile: i was so excited to test i forgot to deploy! its beautiful! see below.

thank you @aurelie i appreciate you making the update so quickly.

image
image415×690 39.1 KB

9

Hello @aurelie ,

it would also be great, if dvh and svh are available for all elements.
Sometimes it was necessary to make a div to 100svh for the first screen or so…
i like also svh more than dvh.
considering the browsercompability the best way would, if in the css are more entries.
at top min-height:100vh, then min-height:100svh or 100dvh.

Here is a great explanation for that.

Is this also be possible?

thanks for your great tool!
stefan

10

You can always bind your property to the string, and then can use any available units here (for exposed property)

11

I will try this.
Thank you!
Stefan