CODEWITHSUNDEEP
iosangularionic-frameworkionic3
Chris
Chris

Reputation: 3293

Ionic - iPhone X statusbar overlays shared header component

I have seen various similar posts with the problem of the iOS status bar overlaying onto the header of apps.

I haven’t yet seen another post which has the same problem as mine.

I am trying to use a shared header component for certain pages and when I use this, I get the overlaying problem.

I have simplified the code and recreated my problem using the ionic tabs starter template:

This page is using a shared header component:

<ion-header>
  <shared-header title="Home - shared header"></shared-header>
</ion-header>

shared-header.component.html

<ion-navbar>
    <ion-title>{{title}}</ion-title>
</ion-navbar>

shared-header.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'shared-header',
    templateUrl: 'shared-header.component.html'
})

export class SharedHeaderComponent {

    @Input('title') title: string;
    constructor() { }
}

This page is not using the shared header component:

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

Why would this be happening? Is it because of the extra <shared-header></shared-header> tags? If so, what can be done to solve this?

Upvotes: 0

Views: 3701

Answers (2)

Sam Strawbridge
Sam Strawbridge

Reputation: 106

The problem is caused by having the component tag inside the header tag, for some reason this causes the header to render incorrectly. The solution I used was to use an attribute in the header instead of the component tags.

Inside the component wrap the selector in square brackets to define it be able to use it as an attribute

shared-header.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: '[shared-header]',
    templateUrl: 'shared-header.component.html'
})

export class SharedHeaderComponent {

    @Input('title') title: string;
    constructor() { }
}

then in the header you can inject the component as an attribute like this 

<ion-header shared-header title="Home - shared header">
</ion-header>

If you want to have access to your component via tags as well as an attribute, you can define multiple selectors 

@Component({
    selector:'[shared-header], shared-header',
    templateUrl: 'shared-header.component.html'
})

Upvotes: 3

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

You can try these below steps

1) Using statusbar cordova plugin, you can set 

if (this.statusBar) {
   this.statusBar.styleDefault();
   this.statusBar.overlaysWebView(false); 
}

2) In index.html, meta tag include 'viewport-fit=cover'

 <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>

Can you also try adding padding-top to the header classes

header {
    /* ... */
    /* Status bar height on iOS 10 */
    padding-top: 0px;
    /* Status bar height on iOS 11.0 */
    padding-top: constant(safe-area-inset-top);
    /* Status bar height on iOS 11+ */
    padding-top: env(safe-area-inset-top);
}

Upvotes: 1

Related Questions