Iphone X space after Header

Ionic Framework ionic-v3
1

I did all the needed updates and added the needed code to meta in index.html, but I still get white space at the bottom of the header before the content section starts. Please see screenshot.

Here is my meta:

<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">

My HTML:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Saved</ion-title>
  </ion-toolbar>
</ion-header>

My Ionic Info:
cli packages:

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
ios-sim    : 5.0.12 
Node       : v7.10.0
npm        : 4.2.0 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b

36
Screen Shot 2017-12-25 at 23.04.36.png954Ă—594 42.2 KB

2

So my problem was that in App.scss I’ve explicitely changed the height of the Toolbar as follows:

.toolbar-background-ios { 
  background: #ffffff;
  height: 70px;           //This was the problem
}

By removing the height attribute, all works perfectly well for oth iPhone X and older iPhone 7 plus.

1 Like
3

The Very first thing to check is the Meta that should be like this

name=“viewport” content=“viewport-fit=cover, width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1”

And if it does not resolve your issue then try to update the status bar plugin. Run the following command.

but before doing that remove the previously installed status bar plugin and then install the above it will surely fix your problem.

References GitHub link : https://github.com/apache/cordova-plugin-statusbar.git

If the issue still Persists then Kindly check your Global.SCSS file and look for the following

  • .platform-ios.platform-cordova:not(.fullscreen) and find the toolbar-ios in that and adjust the header properties according to your requirements.