Ionic modal in iOS overlaps status bar

Hi to everyone. I am struggling with an issue with modal in iOS. It opens in the way that goes to overlap the status bar. The biggest problem occurs in iOS11 because I can not even close the modal.
I use Xcode emulator so I was wondering if it is an emulator issue or ionic-modal problem and how to solve it.
I tried different solutions from stack overflow or other forums adding padding-top to modal but nothing worked.

I use ionic v.5.
I will appreciate any help.!

Simulator Screen Shot - iPhone 11 Pro - 2020-10-15 at 19.03.14|690x291

1 Like

I’m having the same issue but with android.

One way I’m having to fix this issue is by placing this rule in my global CSS (I’m using Angular):

.my-custom-class {
–height: calc(100% - 40px);
}

.my-custom-class is the class I have to reference the modal.
It will be great if there were a way to get the height of the status bar, because if it changes there will be visual problems with the height.

Hey!!! I found a quick fix that can help you get a quick around to this issue.
You can add a top padding to the header of the modal (around 24px) and it won’t look too bad…
Tell me if you can get a better solution to this issue.

Hi,
I ran into the same issue and my solution is to wrap the modal toolbar in a header like this

<IonHeader translucent> <IonToolbar>...</IonToolbar> </IonHeader>

This added the needed amount of margin to the modal Toolbar with the title etc.