White Space Between Header and Content

Ionic Framework ionic-v3
21

thx @Teazy, faced the same problem, I added an empty ion-header as you did but I solved the css differently, respectively:

my-component {
     ion-header {
       display: none;
    }
}

Also I opened a feature request in ionic-angular github in case this would not be know:

22

I have the same problem using Ionic v1.3.1 without WKWebView plugin.

You can see on the left side iOS 10 and on the right side iOS 11. Within iOS 11 there is a gap at the bottom and the cursor isn’t correctly placed in the text input field.

02
Screen Shot 2017-10-02 at 19.40.02.png1818×1880 258 KB

I am using cordova-plugin-statusbar with the following config in the config.xml:

<platform name="ios">
    <preference name="StatusBarOverlaysWebView" value="true"/>
    <preference name="StatusBarStyle" value="default"/>
    ...
</platform>
<feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar"/>
</feature>

Is there any solution without using WKWebView? It breaks my app entirely.

23

The only solution for this issue is WKWebView

24

I have the same issue I resolved with
ion-header {
display: none;
}. Only for hide the white space, but when open a tab page the app makes a little jump to the top, for adjust the margin top or something, with css only the issue is less for me because now is one blank space instead two spaces.

25

@rogeliotrejo13 @Teazy and guyz, the issue I created is now solved, no need of ion-header display: none; anymore. Gonna be included in the next version of Ionic (I guess) and you could already test it if you use the nightly build of ionic-angular

npm install ionic-angular@nightly --save
26

We use Xcode 9 to deploy on test devices and running this setup the error occures. But we just tested our last release (built with Xcode 8) on an device running iOS11 (fresh install from App Store), no problem. So we built our new release again with Xcode 8 and the error still doesn’t occure. So problem solved for now…

27

This still happens to me and I actually found a little work around. It’s very much a hack, but as far as I can see it hasn’t had any negative effects to any applications. Why it works might just give someone an idea on an even better fix.

Create a transparent png image - Can be any size, but I use 1px x 1px so it adds little size to the app.

Add your image directly after the ion-content and give it the style property display: flex; height: 0px;

Continue with your app as normal.

Example code:

<ion-content>
<img src="assets/imgs/home/test.png" style="display: flex; height: 0px">
<!--Rest of application goes here as normal-->
28

.content-ios .scroll-content{
margin-top:44px;
}

changing the margin or scroll content for ios worked for me

29

This works for me: Status bar overlaps navbar content