Search code examples
iosionic-frameworktabsionic4

Ionic 4 - iOS status bar overlaps top tabs

I'm trying to create a tabs bar at the top of my app, with no obvious header, but the iOS status bar is overlapping it. I've tried wrapping the ion-tabs tag in an ion-content tag that has padding but that didn't work. I wrapped the tabs in a header which fixed the padding issue, but then the pages loaded by the tab disappeared inside the header.

I've seen all the posts about headers being overlapped but those were years ago, that's been fixed in ion 4, and the solutions don't work for tabs anyways.

How can I solve this without removing the status bar?

iOS version: 11.4.1

ionic version: 4.0.5

Recreating:

  • Create the ionic tabs starter project
  • Change the tabs placement to top

  • Remove the header in home.html

    <ion-tabs tabsPlacement="top">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

enter image description here

Solution

  • It seems that tabs are just hard to work with. I found a work around by using segments. I'll just need to spend some time to stylize them to look right.

    Here is my new app.html code:

    <ion-header>
  <h2></h2>
  <ion-segment [(ngModel)]="page" (ionChange)="segmentChanged($event)">
    <ion-segment-button value="home">
      <ion-icon name="home"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="about">
      <ion-icon name="information-circle"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="contacts">
      <ion-icon name="contacts"></ion-icon>
    </ion-segment-button>
  </ion-segment>
</ion-header>
<ion-content>
<ion-nav [root]="rootPage"></ion-nav>
</ion-content>

    Having segments in the header worked for me, but in order to get the padding I needed I had to add an empty h2 tag. If there's a better way feel free to let me know, for now I'm happy with this.

    For those of you that would like to do something similar I found the answer, posted by rapropos, here:

    https://forum.ionicframework.com/t/having-a-hard-time-understanding-the-navigation-with-tabs/92918/9