Ionic 5 Modal View Full Screen

Ionic Framework
1

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

2

As you can see here, the Modal accepts --min-width and --min-height. I think setting them to 100% should to the Trick? :thinking:

3

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

4

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

5

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

6

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.