Default iPhone X+ header(time, battery...) shown above ion-header, how to work around this?

Hello guys,

I used ion-header to show hamburger button and some other info. But when on iPhone X+, this content is shown under default iOS header(time and battery etc) and I cannot interact with my header.

How can this be solved, should I not use ion-header component?
Here is an image of what I am talking about :
image

Also the bottom line which comes from same devices is above buttons that I show inside my modal. Can I target these devices only and add more margin/padding so this line isn’t over them. I could make more room by adding margin overall in my design but then on other devices it wouldn’t make sense.

This is the line I am refering to :
image

Any advice is appreciated!

This is called the safe area and handed automatically by Ionic. Can you add some more info about your ionic version and please show the code of your header

1 Like

I am using ionic 5. “@ionic/vue”: “^5.7.0”

I palced this header inside component which is layout for certain routes.

I think I found problem. Inside ion-header main div is this one

<div class="top-0">

I cannot remember why I added this absolute positioning to it, but this could be the cause of this problem on these devices. I think since I used header inside layout it wasn’t fixed to the top so I did this manually.

I’m not a Vue User, but in Angular you normally can not wrap Ionic Conponents that are page relevant (header, toolbar, content, etc.) in own components.

Also you have to use the toolbar in the header, because the toolbar handles this safe area :blush:

1 Like

Header is not inside separate component it in layout view which is parent for child route views.

It’s like this :

<ion-page>
    <ion-header class="ion-no-border">
      <TheStaffHeader/>
    </ion-header>

    <TheStaffSideMenu/>

    <ion-router-outlet>

    </ion-router-outlet>

  </ion-page>

And the content of ion-header is inside separate component.

But I did not use ion-toolbar as you mentioned so that should be the cause of this problem.

I am going to fix this and let you know how it went. Thanks a lot for advices!

You were right, after using toolbar everything is fine. Thank you for help!

But do you know how can this problem with bottom line be solved?

I see that on ion-tab component this line is not over tabs but there is more padding on the bottom for it to fit. I dont know even how this feature is called for this iPhones so I cannot really search it out.

Can I explicitly tell ionic to throw more padding where iPhone X or newer is used so this line doesnt go over the content? You can see image #2 from this post.

1 Like

The toolbar on top uses the CSS Variable --ion-safe-area-top. there is also a --ion-safe-area-bottom that is used for footer toolbars or bottom tabs. Of course you can also use this by urself and add this as a bottom padding to the <ion-content>

1 Like

I am going to look into this. ion-tab component probably uses this.
Thanks again for all the help!

I exactly used --ion-safe-area-top and bottom variable as you suggested and got everything I needed. Thank you so much for this help man!