# White Space Between Header and Content

**URL:** <https://forum.ionicframework.com/t/white-space-between-header-and-content/106733>\
**Category:** ionic-v3\
**Created:** [September 26, 2017, 5:28am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733 "2017-09-26T05:28:46Z")\
**Posts on this page:** 10\
**Page:** 2

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [October 1, 2017, 6:45pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/21 "2017-10-01T18:45:58Z")

</div>

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:

> <https://github.com/ionic-team/ionic/issues/13031>

---

<div class="post-metadata">

**Author:** ![iwan\_uschka](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/iwan_uschka/32/91684_2.png) [@iwan\_uschka](https://forum.ionicframework.com/u/iwan_uschka)\
**Post date:** [October 2, 2017, 5:52pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/22 "2017-10-02T17:52:46Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/4/0/40d987d92f6d9c3d0f2b8193560598cf7ed3088c.png)

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![aditya\_1027](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aditya_1027/32/109341_2.png) [@aditya\_1027](https://forum.ionicframework.com/u/aditya_1027)\
**Post date:** [October 3, 2017, 3:51am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/23 "2017-10-03T03:51:33Z")

</div>

The only solution for this issue is `WKWebView`

---

<div class="post-metadata">

**Author:** ![rogeliotrejo13](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rogeliotrejo13/32/112900_2.png) [@rogeliotrejo13](https://forum.ionicframework.com/u/rogeliotrejo13)\
**Post date:** [October 4, 2017, 7:15am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/24 "2017-10-04T07:15:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [October 4, 2017, 8:23am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/25 "2017-10-04T08:23:53Z")

</div>

@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

```

> <https://github.com/ionic-team/ionic/issues/13031>

---

<div class="post-metadata">

**Author:** ![iwan\_uschka](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/iwan_uschka/32/91684_2.png) [@iwan\_uschka](https://forum.ionicframework.com/u/iwan_uschka)\
**Post date:** [October 8, 2017, 3:27pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/26 "2017-10-08T15:27:18Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![8tomo8](https://avatars.discourse-cdn.com/v4/letter/8/c89c15/32.png) [@8tomo8](https://forum.ionicframework.com/u/8tomo8)\
**Post date:** [July 30, 2018, 11:18pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/27 "2018-07-30T23:18:23Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![sudinshakya](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@sudinshakya](https://forum.ionicframework.com/u/sudinshakya)\
**Post date:** [September 18, 2018, 8:37am UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/28 "2018-09-18T08:37:41Z")

</div>

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

changing the margin or scroll content for ios worked for me

---

<div class="post-metadata">

**Author:** ![MGA93](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@MGA93](https://forum.ionicframework.com/u/MGA93)\
**Post date:** [August 4, 2020, 4:32pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/29 "2020-08-04T16:32:28Z")

</div>

This works for me: [Status bar overlaps navbar content](https://forum.ionicframework.com/t/status-bar-overlaps-navbar-content/110037/8)

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:54pm UTC](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733/30 "2021-07-19T20:54:19Z")

</div>

Closed on July 19, 2021, 8:54pm UTC



[Previous page](https://forum.ionicframework.com/t/white-space-between-header-and-content/106733.md?page=1)