# Ionic 5 Modal View Full Screen

**URL:** <https://forum.ionicframework.com/t/ionic-5-modal-view-full-screen/187980>\
**Category:** Ionic Framework\
**Created:** [April 24, 2020, 12:13am UTC](https://forum.ionicframework.com/t/ionic-5-modal-view-full-screen/187980 "2020-04-24T00:13:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hpwah](https://avatars.discourse-cdn.com/v4/letter/h/22d042/32.png) [@hpwah](https://forum.ionicframework.com/u/hpwah)\
**Post date:** [April 24, 2020, 12:13am UTC](https://forum.ionicframework.com/t/ionic-5-modal-view-full-screen/187980/1 "2020-04-24T00:13:20Z")

</div>

Hi,

I implemented modal view in my app. It cannot present as full screen in both iPad and Desktop browser.  
May I know whether I miss any parameters to set?  
Appreciate you share the alternative solution.

Thank you

Andy

---

<div class="post-metadata">

**Author:** ![EinfachHans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/einfachhans/32/130917_2.png) [@EinfachHans](https://forum.ionicframework.com/u/EinfachHans)\
**Post date:** [April 24, 2020, 7:22am UTC](https://forum.ionicframework.com/t/ionic-5-modal-view-full-screen/187980/2 "2020-04-24T07:22:25Z")

</div>

As you can see [here](https://ionicframework.com/docs/api/modal#css-custom-properties), the Modal accepts `--min-width` and `--min-height`. I think setting them to **100%** should to the Trick? 🤔

---

<div class="post-metadata">

**Author:** ![hpwah](https://avatars.discourse-cdn.com/v4/letter/h/22d042/32.png) [@hpwah](https://forum.ionicframework.com/u/hpwah)\
**Post date:** [April 25, 2020, 4:14am UTC](https://forum.ionicframework.com/t/ionic-5-modal-view-full-screen/187980/3 "2020-04-25T04:14:17Z")

</div>

Hey, @EinfachHans, thank you for the prompt reply.

Share my findings as below (I am using Ionic 5):

1. Define class in global scss (in theme folder), set width:100%, height:100%
2. In Modal Controller, inject class name just defined in step #1

Outstanding issue:  
Since the modal view height is 100%, the buttons on the navigation bar of the modal view is overlapped with the status bar in iOS devices, hence, it’s not easy for the user to tap.  
Need further optimise the stylesheet.  
If anyone of you have the experience, please feel free to share.  
Hope this helps others who has the same question to Ionic 5.

Thanks

---

<div class="post-metadata">

**Author:** ![basti](https://avatars.discourse-cdn.com/v4/letter/b/fbc32d/32.png) [@basti](https://forum.ionicframework.com/u/basti)\
**Post date:** [March 21, 2021, 10:49pm UTC](https://forum.ionicframework.com/t/ionic-5-modal-view-full-screen/187980/4 "2021-03-21T22:49:41Z")

</div>

Thanks! Do you also haven a solution for the overlap-problem on iOS?

---

<div class="post-metadata">

**Author:** ![hpwah](https://avatars.discourse-cdn.com/v4/letter/h/22d042/32.png) [@hpwah](https://forum.ionicframework.com/u/hpwah)\
**Post date:** [March 21, 2021, 11:17pm UTC](https://forum.ionicframework.com/t/ionic-5-modal-view-full-screen/187980/5 "2021-03-21T23:17:48Z")

</div>

Hi @basti , no, don’t have yet.

---

<div class="post-metadata">

**Author:** ![hassamnaseer](https://avatars.discourse-cdn.com/v4/letter/h/7cd45c/32.png) [@hassamnaseer](https://forum.ionicframework.com/u/hassamnaseer)\
**Post date:** [November 16, 2021, 6:57am UTC](https://forum.ionicframework.com/t/ionic-5-modal-view-full-screen/187980/6 "2021-11-16T06:57:21Z")

</div>

Hey @hpwah, the issue you are getting is probably related to safe area paddings in iOS. So basically, in iOS devices which have notches, ionic has a safe area padding variable but ionic doesn’t place them so have to put them yourself. This link might help: [Safe-area css ios](https://forum.ionicframework.com/t/safe-area-css-ios/194278).