CODEWITHSUNDEEP
htmlcssionic4
blessing dickson
blessing dickson

Reputation: 125

Ion footer shows half in iphoneX

I have an ionic4 application in which I have an . It works perfectly on android and on iPhone 5 to 8+. However in iPhoneX+, I get the issue as shown in the image below.

enter image description here

I have the following html code for my footer

<ion-footer  *ngIf="text">
  <ion-toolbar mode="ios"> 
    <ion-tabs>
      <ion-tab-bar slot="bottom">

        <ion-tab-button (click)="ngOnInit()">
          <ion-icon name="home"></ion-icon>
          <ion-label>{{ text.home_footer_name }}</ion-label>
        </ion-tab-button>

        <ion-tab-button (click)="nearBy()">
          <ion-icon name="pin"></ion-icon>
          <ion-label>{{ text.home_nearest }}</ion-label>
        </ion-tab-button>

        <ion-tab-button routerLink="/cart" routerDirection="forward">
          <ion-icon name="basket"></ion-icon>
          <ion-label>{{ text.home_cart }}</ion-label>
          <ion-badge *ngIf="count > 0">{{ count }}</ion-badge>
        </ion-tab-button>

        <ion-tab-button routerLink="/profile" routerDirection="forward">
          <ion-icon name="person"></ion-icon>
          <ion-label>{{ text.home_profile }}</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-toolbar>
</ion-footer>

Upvotes: 0

Views: 536

Answers (1)

Wolf Blazer
Wolf Blazer

Reputation: 71

i check and that problem occurs when ion-tabs are used individually without the template tabs that its describe on ionic documentation, but please try changing,

<ion-tab-bar slot="bottom">

with:

<ion-tab-bar slot="top">

PD. This only happens in iOS. please let me know if this solves the problem, for me it solved

Upvotes: 1

Related Questions