Ion-header and Ion-Footer text overlap on NavController push

Ionic Framework ionic-v3
1

I am using the NavController push method to push a new page of my application onto the navigation stack when a button on my landing page is clicked. The page I am pushing has content in the ion-header, ion-content, and ion-footer tags. When I click the button, the page is pushed as expected, but text in the ion-header and ion-footer overlaps during the transition (for that matter, even when the page is popped off the stack). Does Ionic 2 not support using ion-header and ion-footer in a page that will be pushed? Thanks.

2

@mhartington Is it by design that all text of a pushed page in my Ionic 2 app should be within <ion-content> and not within <ion-header> and <ion-footer>? Would really appreciate a comment that guides me on this issue if possible. Thanks.

3

can you share some code?

4 
<ion-header>
    <h5>Home Page Header</h5>
</ion-header>
<ion-content>
    <h1>Page content</h1>
</ion-content>
<ion-footer>
    <button (click)="pushNextPage()">Go</button>
</ion-footer>

There’s a simplified version of the initial page; here is the pushNextPage() method definition:

pushNextPage(event:MouseEvent) {
    this.nav.setRoot(SecondaryPage);
}

The Secondary page is as follows:

<ion-header>
    <h5>Secondary Page Header</h5>
</ion-header>
<ion-content>
    <h1>Secondary Page content</h1>
</ion-content>
<ion-footer>
    <button (click)="goBack()">Go Back</button>
</ion-footer>

These are obviously simplified versions of my markup, but they should illustrate the same issue. Essentially, when I click “Go” in the home page, the text in the ion-header gets overlapped during the transition; however, if I move the content from the ion-header and ion-footer on the secondary page to the ion-content tag, the overlapping text goes away on transitions. Is this by design, i.e. should all content on a pushed page only be within ion-content? Thanks.

5

try

<ion-header>
   <ion-navbar>
      <ion-titel>Home Page Header</ion-title>
  </ion-navbar>
</ion-header>
6

I think that would work for a basic case like the sample I provided, but in the larger scale application I am working on, I am already using the navbar for another purpose. Also, the content in the footer still overlaps.

7

Well thats why you’re having your issues. You shouldn’t be using navbar for anything else, this is very important in the app.

8

Thanks for the info. I wanted to build a custom navbar for my app (not using native tabs), so my navbar on all pages of my application looks something like this:

<ion-header>
  <ion-navbar>
  	<ion-row>
  		<ion-col class="main-nav">
		    <tab1></tab1>  
		</ion-col>

		<ion-col class="main-nav">
		    <tab2></tab2>
		</ion-col>

		<ion-col class="main-nav">
		    <tab3></tab3>
		</ion-col>

		<ion-col class="main-nav">
		   <tab4></tab4>
		</ion-col>
  	</ion-row>
  </ion-navbar>
</ion-header>

I was told not to build a global navbar component; instead, I chose to replicate the code for the navbar itself but create a component for each button so as to not replicate the navigational logic associated with each button. Is this not the way to go about it? Thanks.

9

This is not the way to go. If you use a custom component for the navbar, it messes with ng2’s content project, and the navbar does not end up in the dom where it needs to be

10

Just to be clear, I am not using the entire navbar as a custom component; only the tab1, tab2, etc are custom components that are embedded in the navbar. The markup I posted itself is on every page of my app.

As per components for the navbar, I was referring to @brandyscarney in this discussion: https://github.com/driftyco/ionic/issues/6004. It looked like a global component for the navbar was made and placed in the ion-header. I’m not going as far as to doing that; rather, since every button in my navbar always navigates to the same pages, I created components for each button that simply sets the root to a certain page. I believe @rapropos chimed in on this with me earlier.

Regardless of components within the navbar, if we discuss my original issue, button in the footer still overlaps the original page on a transition. Is there a fix for this? Thanks for all the time and help.

11

@mhartington How can I fix the content overlap issue with content in the ion-footer? I fixed the header overlap by moving the content from ion-header to the beginning of ion-content, but the formatting of my app really does require me to keep the button at the bottom in the footer. Thanks.

12

Got a working solution, which was to simply move the ion-footer within ion-content.