v4: <ion-header> overlaps the phone menu

[vadost]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.11 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.11
   @angular-devkit/core       : 0.7.0-rc.2
   @angular-devkit/schematics : 0.7.0-rc.2
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.11
   @ionic/schematics-angular  : 1.0.0-rc.11

System:

   NodeJS : v8.11.1 (/usr/local/bin/node)
   npm    : 5.6.0
   OS     : macOS High Sierra

Describe the Bug
If you add a color to the tooltip, you will see that the header overlaps the time-indicator and the battery elements

Steps to Reproduce
Steps to reproduce the behavior:

1. Сreated a project with tabs using the CLI
2. Added color to ion-toolbar
3. Opened in the Ionic DevApp
4. See Toolbar overlays the battery time and charge indicator

Related Code

<ion-header>
  <ion-toolbar color="secondary">
    <ion-title>public</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

</ion-content>

[tntwist]

Hi you need to use the cordova plugin cordova-plugin-statusbar to resolve this.

In your app.component.ts you can set the status bar to not overlay the webview of your app.

...
import { StatusBar } from '@ionic-native/status-bar/ngx';
...

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent {
    constructor(
        private platform: Platform,
        private statusBar: StatusBar,
       ...
    ) {
        ...
        this.statusBar.overlaysWebView(false);
        ...
    }
...

[vadost]

@tntwist Thanks, but:

1. Your solution did not help me!
2. The statusBar should not overlap by default!

[CookieCookson]

@vadost do you have viewport-fit=cover in your <meta name="viewport"> content attribute?

e.g.

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

[vadost]

@CookieCookson Yes, I have it by default

[cesartomatis]

same problem here

[brandyscarney]

Could you please try updating to the latest release @ionic/angular@4.0.0-beta.2 and let me know if you're still seeing this? It should be fixed. Thanks!

npm i @ionic/angular@4.0.0-beta.2`

[vadost]

My result!

Is it possible to make the indicator of time and charge with white color?

[paulstelzer]

@vadost - yes you can change the color. Take a look at the cordova plugin

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/

Or use ionic native wrapper for this plugin:
https://ionicframework.com/docs/native/status-bar/

If you need help, post your question in the forum

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