Ionic-framework: <ion-content> goes behind <ion-header> in a menu

[jgw96]

Short description of the problem:

<ion-content> goes behind <ion-header> in a menu causing the top menu items to be cut off.

Which Ionic Version? Ionic 2 beta.10

[ErkoKnoll]

Same problem seems to be related to tab content. Content get rendered behind the header and tabs footer thus cutting of some portion of the content. I think they have new "fullscreen" property turned on by default that was introduced in beta 10.

[jgw96]

@ErkoKnoll did you follow the upgrade instructions here? I can't reproduce any issue with tabs.

[ErkoKnoll]

Hi,

Yes I did. There does not seem to be any kind of breaking changes related to tabs and tab contents since my tab contents are just pages with ion-content root element (also tested by adding ion-header on top of ion-content with ion-navbar and ion-title but it didn't seem to help). For some tabs it gets fixed when I navigate to some other tab and then navigate back. And it definitely broke with upgrade to beta 10.

[FdezRomero]

Hey @jgw96,

I'm having the same problem. Plus, it's not clear where <ion-tabs> should go because the changelog says:

ion-content now takes up 100% of the viewport height, but it has margin added to the top and bottom to adjust for headers, footers, and tabs.

So you would think <ion-tabs> should go at the root page level like always, but at the end you read:

The only elements that should be children of a page are ion-header, ion-content, and ion-footer.

Regardless of the bug, where should <ion-tabs> go?

Thanks!

[jgw96]

@ErkoKnoll or at @FdezRomero would you be able to provide a plunker or just an example of your template that i can use to reproduce this issue?

[FdezRomero]

Sure @jgw96. My root navigation in app.ts looks like this:

@Component({
  template: '<ion-nav #nav [root]="rootPage"></ion-nav>'
}) ...

At the referenced rootPage I have a navigation bar, then a tab bar, and then the content (inside the <ion-tab>):

<ion-header>
  <ion-navbar primary>

    <ion-title>Home</ion-title>

    <ion-buttons end>
      <button hideWhen="cordova" (click)="save()"><ion-icon md="md-add" ios="ios-add"></ion-icon></button>
      <button (click)="search()"><ion-icon md="md-search" ios="ios-search-outline"></ion-icon></button>
      <button (click)="notifications()"><ion-icon md="md-notifications" ios="ios-notifications-outline"></ion-icon></button>
      <button (click)="settings()"><ion-icon md="md-settings" ios="ios-settings-outline"></ion-icon></button>
    </ion-buttons>

  </ion-navbar>
</ion-header>

<ion-tabs tabbarLayout="icon-left" tabbarPlacement="top">
  <ion-tab [root]="PrivateListsRoot" tabTitle="My Lists" tabIcon="lock"></ion-tab>
  <ion-tab [root]="PurchasedListRoot" tabTitle="Purchased" tabIcon="checkmark-circle"></ion-tab>
</ion-tabs>

The problems I found are:

• Both <ion-tabs> and <ion-content> are shown behind the <ion-header>.
• Child pages keep the <ion-navbar> of the parent page and don't show their own <ion-navbar> on top (so I cannot go back to the previous page).

Thanks.

[jgw96]

ahh, thanks @FdezRomero! Now i know whats wrong. So, ion-tabs should not be in a template that includes anything else. ion-tabs are meant to be a "wrapper" for pages. If you create a tabs starter with ionic start CoolApp tabs --v2 you will see a good example of how tabs are meant to be used. From what i can see from looking at your template it looks like your using tabs for something that would better be handled by our ion-segment component. I hope this explains it well!

[FdezRomero]

@jgw96 Got it, thanks! It was weird that it was working perfectly and then suddenly broke!

I would suggest to update the tabs docs to specify that they are meant to be used alone as a root component, and when you should choose tabs or segments. I chose tabs because I wanted to have an individual component per segment/tab, and they were also a better fit for the design.

[jgw96]

@FdezRomero No problem. Yeah, this is something that probably should not have ever worked like that, sorry about that. A docs update is a good idea, i will look into that (: . Thanks for using Ionic!

[ErkoKnoll]

So if I understand you correctly you are saying that tabs component should be used as a root component of he app and not anywhere else? Currently indeed my app uses tabbed page in a page that is pushed in via navController and currently it also has ion-navbar on top of ion-tabs to provide a back button and it worked really great until now. Would be really unfortunate if you didn't support that use case anymore. I could fix it by adding margins on the top and the bottom of content pages to lift the content out of headers and footers but it would be a workaround. And I guess a lot of people are going to miss that use case. I also like the look and feel of tabs over the segments.

[ErkoKnoll]

On the second thought I cannot do the workaround myself since it works irregularly and sometimes gets fixed if you switch the selection of tabs. Please consider fixing it also for the use case pointed out by me and @FdezRomero.

[MartinMuzatko]

Same problem here. Has nothing to do with ion-tabs in our case

[ATakaSKY]

I too am facing this problem.
I have an ion-header and then ion-content. It works fine while debugging on the browser but the content hides behind the header when running in emulator or on a real device.
This particularly happens when I add a new item however.

[falasvand]

@ATakaSKY Yes I am also still having the exact same issue as you while running the application on my android device.

[ATakaSKY]

@falasvand I solved it by following the docs:https://ionicframework.com/docs/api/components/content/Content/

Declare this in your component:
@ViewChild(Content) content: Content;

Then after getting the data back in the subscribe, I used:
this.content.resize();
and it worked just fine.

[falasvand]

@ATakaSKY thanks! I placed it in ionViewWillEnter() and it worked as well.

[caparkin]

@falasvand thanks for your solution. Helped a lot!

[pnnrahul]

<ion-header> <ion-navbar> <ion-title>Physics</ion-title> </ion-navbar> </ion-header> <ion-content padding has-header contentTop="200px"> <ion-list class="chapter-list"> <button ion-item no-padding *ngFor="let chapterList of chapterLists" (click)="chapterListItemClk(event)" no-border> {{ chapterList.video_name }} <img src="{{chapterList.video_icon}}" item-left alt=""> </button> </ion-list> </ion-content>
@ATakaSKY @falasvand


<ion-content> is hidden behind <ion-header>
My ionic version is 3.19.1
I have tried 'has-header' as well.
But not fixed.
@camwiegert @janpio
My code above.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.