# Set modal height to 100dvh **URL:** \ **Category:** Ask us anything\ **Created:** [March 7, 2024, 12:09am UTC](https://community.weweb.io/t/set-modal-height-to-100dvh/7443 "2024-03-07T00:09:49Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![forgelab](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/forgelab/32/9671_2.png) [@forgelab](https://community.weweb.io/u/forgelab)\ **Post date:** [March 7, 2024, 12:09am UTC](https://community.weweb.io/t/set-modal-height-to-100dvh/7443/1 "2024-03-07T00:09:49Z")
perhaps I’m missing something obvious, but I don’t see a way to set the modal height itself ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f51813f111481bddd7815e2e79a72d88dc8cb35b.png) 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! 🙏 ---
**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\ **Post date:** [March 7, 2024, 12:25am UTC](https://community.weweb.io/t/set-modal-height-to-100dvh/7443/3 "2024-03-07T00:25:07Z")
Hey Its a good idea, we should update our modal component I am opening a ticket on our side ---
**Author:** ![forgelab](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/forgelab/32/9671_2.png) [@forgelab](https://community.weweb.io/u/forgelab)\ **Post date:** [March 7, 2024, 12:25am UTC](https://community.weweb.io/t/set-modal-height-to-100dvh/7443/4 "2024-03-07T00:25:49Z")
Amazing, would be such a big help, @aurelie and open doors for everyone optimizing for mobile. Appreciate all you and your team are doing. ---
**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\ **Post date:** [March 12, 2024, 2:03pm UTC](https://community.weweb.io/t/set-modal-height-to-100dvh/7443/5 "2024-03-12T14:03:20Z")
Its in production, let me know if this is resolving your problem 🙂 ---
**Author:** ![forgelab](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/forgelab/32/9671_2.png) [@forgelab](https://community.weweb.io/u/forgelab)\ **Post date:** [March 12, 2024, 4:24pm UTC](https://community.weweb.io/t/set-modal-height-to-100dvh/7443/6 "2024-03-12T16:24:08Z")
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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/60a192bebd6da78c1dbf0dcb4621690cb6509006.png) ---
**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\ **Post date:** [March 12, 2024, 4:50pm UTC](https://community.weweb.io/t/set-modal-height-to-100dvh/7443/7 "2024-03-12T16:50:49Z")
Yes i internally change the css of the modal to be position in dvh. Did you republish? ---
**Author:** ![forgelab](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/forgelab/32/9671_2.png) [@forgelab](https://community.weweb.io/u/forgelab)\ **Post date:** [March 12, 2024, 5:02pm UTC](https://community.weweb.io/t/set-modal-height-to-100dvh/7443/8 "2024-03-12T17:02:15Z")
sorry, amateur move by me 🙂 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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9432ce708713120480566d7e22064cff7b86a20b.jpeg) ---
**Author:** ![StefanSan](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@StefanSan](https://community.weweb.io/u/StefanSan)\ **Post date:** [June 10, 2024, 3:49pm UTC](https://community.weweb.io/t/set-modal-height-to-100dvh/7443/9 "2024-06-10T15:49:14Z")
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. [![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/45443b2f23b5718008e510c83e9e4504aacd332c.jpeg "Use these instead of vh") ](https://www.youtube.com/watch?v=ru3U8MHbFFI) Is this also be possible? thanks for your great tool! stefan ---
**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\ **Post date:** [June 10, 2024, 4:53pm UTC](https://community.weweb.io/t/set-modal-height-to-100dvh/7443/10 "2024-06-10T16:53:04Z")
You can always bind your property to the string, and then can use any available units here (for exposed property) ---
**Author:** ![StefanSan](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@StefanSan](https://community.weweb.io/u/StefanSan)\ **Post date:** [July 9, 2024, 12:06pm UTC](https://community.weweb.io/t/set-modal-height-to-100dvh/7443/11 "2024-07-09T12:06:04Z")
I will try this. Thank you! Stefan