Page Titles are overlapping while navigating in Ionic 3

Question

I'm building the app in Ionic 3 and I'm navigating the pages with this.navCtrl.push/pop() functions.

But whenever I push() or pop(), the titles are got overlapped.

attached the screenshot.

Any suggestions?

Thanks

Here is the header code snippets.

<ion-header>

    <ion-navbar [hideBackButton]="true" padding>
        <h6 class="navbar--title">Select acquisitions</h6>
        <ion-buttons end>
            <button (click)="goBack()" class="navbar--back"><i class="icon-chevron-left"></i></button>
        </ion-buttons>
    </ion-navbar>

</ion-header>

Is there any custom style / css rule being applied to the title? — sebaferreras, Dec 28 '17 at 21:46
@sebaferreras I've put the code snippets for ion-header but IMO, even if we are using custom header this shouldn't be happened while navigating since ionic is switching the views. — Patrick Blind, Dec 29 '17 at 03:47
is there any other way to hide the backbutton other than the one you used? — HexaCrop, Dec 29 '17 at 07:07
@AnjilDhamala I've already tried with ion-title but still same issue. Also, I need to customize the header. — Patrick Blind, Jan 04 '18 at 03:29

score 0 · Answer 1 · answered Mar 25 '19 at 12:17

You can fix the overlapping by using NavController Lifecycle events, at least i manage to do it. In your case change the html to:

    <ion-navbar [hideBackButton]="true" padding>
        <h6 class="navbar--title" [hidden]="!showHeader">Select acquisitions</h6>
        <ion-buttons end>
            <button (click)="goBack()" class="navbar--back"><i class="icon-chevron-left"></i></button>
        </ion-buttons>
    </ion-navbar>

Next thing to do is implement inside *.ts file two functions from lifecycle events:

ionWillLeave() {
    this.showHeader = false;
}

ionWillEnter() {
    this.showHeader = true;
}

And ofcourse showHeader value is initially set to false.

Page Titles are overlapping while navigating in Ionic 3

1 Answers1