Ionic-framework: bug: Ionic 2 does not account for header in a component

[agyepong]

Type: bug

Ionic Version: 2.x

Platform: all

Create a component for ionic 2 page and use the component in a page like below: the header hides portions of the content. Even resize() call does not fix it. The problem also exists for the footer.

ngOnInit() {
        this.content.resize();
}

page.html

<app-header></app-header>
<ion-content padding>
    <ion-card>
        <ion-list>
            <ion-item *ngFor="let asset of accountBalances">
            </ion-item>
        </ion-list>
    </ion-card>
    <ion-card>
   </ion-card>
</ion-content>

appheader.html

<ion-header>
    <ion-navbar>
        <ion-title>Wallet</ion-title>
        <button ion-button menuToggle start>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-buttons ion-button end>
            <button (click)="toggleRightMenu()">
                <ion-icon name="more"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

appheader.ts

import { Component } from '@angular/core';
import { NavController, MenuController } from 'ionic-angular';

/*
  Generated class for the Appheader page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'app-header',
  templateUrl: 'appheader.html',
})
export class Appheader {

  constructor(private navCtrl: NavController, public menuCtrl: MenuController) {
  }

  toggleLeftMenu() {
      this.menuCtrl.toggle('left');
  }

  toggleRightMenu() {
      this.menuCtrl.toggle('right');
  }

}

=========
The following code works but we want to be able to re-use the app-header component in other pages and we do not want to have to duplicate this everywhere we need it; which will defeat the purpose of using components

page.html

<ion-header>
    <ion-navbar>
        <ion-title>Wallet</ion-title>
        <button ion-button menuToggle start>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-buttons ion-button end>
            <button (click)="toggleRightMenu()">
                <ion-icon name="more"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-card>
        <ion-list>
            <ion-item *ngFor="let asset of accountBalances">
            </ion-item>
        </ion-list>
    </ion-card>
    <ion-card>
   </ion-card>
</ion-content>

[mhartington]

This is because of how content project works. If you wanted to use a custom component, ion-header needs to be outside of the custom component.

<ion-header>
  <my-component></my-component>
</ion-header>
<ion-content></ion-content>

[sarahsga]

@mhartington This doesn't completely solve the issue. The top margin for ios status-bar still doesn't appear.

<ion-header no-border>
  <ion-navbar color="blue-light">
    <ion-buttons start>
      <button ion-button icon-left>
        <ion-icon name="arrow-back"></ion-icon>
        carey
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button ion-button>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Output is:

---

<ion-header no-border>
  <app-header></app-header>
</ion-header>

Output is:

Notice that the margins are not the same in the two pictures :(

[AdnanCukur]

why was this closed ? having the same issue

[onderceylan]

@mhartington this issue should be reopened. With your suggestion, content project works indeed however the styling issue still exists as @sarahsga mentioned.

The issue is, in ionic.css file, header styling is being set by child selectors. This should be set without child selector since header is not the first child anymore in case of there's a component rendering.

@sarahsga @AdnanCukur
Temporary solution:

.ios ion-header .toolbar.statusbar-padding:first-child {
    padding-top: 24px !important;
    min-height: 64px !important;
}

.ios ion-header .toolbar.statusbar-padding:first-child ion-title {
    padding-top: 20px !important;
}

Issue fix:
In main.css, wherever you use child selectors for ion-header, replace it with the following;

Example:

WRONG .ios ion-nav > .ion-page > ion-header > .toolbar.statusbar-padding:first-child
CORRECT .ios ion-nav > .ion-page > ion-header .toolbar.statusbar-padding:first-child

[brassier]

I'm also having this same issue. Any chance this will be re-opened?

[martinstolz-ch]

same issue...

[captainjim1]

Same issue -- everything works except the status bar isn't getting the proper padding in iOS. @onderceylan 's temp fix worked for me.

@mhartington - any chance we can get this reopened?

[raghav-khunger]

Following the above ideas I added this class in app.scss in order to fix the padding issue of ios

.ios ion-nav > .ion-page ion-header > .toolbar.statusbar-padding:first-child, 
.ios ion-tab > .ion-page ion-header > .toolbar.statusbar-padding:first-child, 
.ios ion-tabs > .ion-page.tab-subpage ion-header > .toolbar.statusbar-padding:first-child, 
.ios ion-menu > .menu-inner ion-header > .toolbar.statusbar-padding:first-child{
    padding-top: calc(20px + 4px);
        min-height: calc(44px + 20px);
}


.ios ion-nav > .ion-page  ion-header > .toolbar.statusbar-padding:first-child ion-segment, 
.ios ion-nav > .ion-page  ion-header > .toolbar.statusbar-padding:first-child ion-title, 
.ios ion-tab > .ion-page  ion-header > .toolbar.statusbar-padding:first-child ion-segment, 
.ios ion-tab > .ion-page  ion-header > .toolbar.statusbar-padding:first-child ion-title, 
.ios ion-tabs > .ion-page.tab-subpage  ion-header > .toolbar.statusbar-padding:first-child ion-segment, 
.ios ion-tabs > .ion-page.tab-subpage  ion-header > .toolbar.statusbar-padding:first-child ion-title, 
.ios ion-menu > .menu-inner ion-header > .toolbar.statusbar-padding:first-child ion-segment, 
.ios ion-menu > .menu-inner ion-header > .toolbar.statusbar-padding:first-child ion-title{
    padding-top: 20px;
        height: calc(44px + 20px);
        min-height: calc(44px + 20px);
}

Ionic team should fix this issue since taking _ion-header_ out to _component_ is a very common requirement instead of repeating it on each and every page.

[jdnichollsc]

The Ionic team should be to add examples working before to close issues... it looks like avoiding mistakes always and getting out of the way.
In any case, we thank them for all the effort they have put into developing the framework, but they should wait a prudent time before closing the issues 👍

[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.