# Unnecessary top padding in toolbar

**URL:** <https://forum.ionicframework.com/t/unnecessary-top-padding-in-toolbar/90366>\
**Category:** ionic-v3\
**Created:** [May 15, 2017, 2:49pm UTC](https://forum.ionicframework.com/t/unnecessary-top-padding-in-toolbar/90366 "2017-05-15T14:49:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucifer\_AM](https://avatars.discourse-cdn.com/v4/letter/l/e68b1a/32.png) [@lucifer\_AM](https://forum.ionicframework.com/u/lucifer_AM)\
**Post date:** [May 15, 2017, 2:49pm UTC](https://forum.ionicframework.com/t/unnecessary-top-padding-in-toolbar/90366/1 "2017-05-15T14:49:12Z")

</div>

`<ion-header no-border> <ion-toolbar> <ion-buttons left> <button ion-button clear icon-only (click)="editProfile()" style="color:white"> <ion-icon name="create"></ion-icon> </button> </ion-buttons> <ion-title> Profile </ion-title> <ion-buttons end> <button ion-button clear icon-only end (click)="settings()" style="color:white"> <ion-icon name="settings"></ion-icon> </button> </ion-buttons> </ion-toolbar> </ion-header>`

the above code when run in android gives a proper output without any extra padding, but when run in iPhone it is setting an extra top-padding. When run in simulator or ionic-lab it won’t show but after I run it on iPhone it shows the extra padding.

---

<div class="post-metadata">

**Author:** ![luukschoen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luukschoen/32/98585_2.png) [@luukschoen](https://forum.ionicframework.com/u/luukschoen)\
**Post date:** [May 15, 2017, 2:52pm UTC](https://forum.ionicframework.com/t/unnecessary-top-padding-in-toolbar/90366/2 "2017-05-15T14:52:30Z")

</div>

Did you debug it on the device with the safari inspector to see where the padding is coming from? Or do you in any way manipulate the statusbar somewhere?

---

<div class="post-metadata">

**Author:** ![lucifer\_AM](https://avatars.discourse-cdn.com/v4/letter/l/e68b1a/32.png) [@lucifer\_AM](https://forum.ionicframework.com/u/lucifer_AM)\
**Post date:** [May 15, 2017, 3:26pm UTC](https://forum.ionicframework.com/t/unnecessary-top-padding-in-toolbar/90366/3 "2017-05-15T15:26:39Z")

</div>

Yes I have done it in config.

```auto
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#e55d5f" />

```

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/4/3/43a457cfa1d63219bbda598cabc0a3a759891feb.jpg)

also i have done this in app.module.ts

```auto
IonicModule.forRoot(MyApp, null, {
      platforms:{
        ios:{
          statusbarPadding: false
        }
      }
    }),

```

“debug it on the device with the safari inspector”  
Thanks that helped a lot. 😃

---

<div class="post-metadata">

**Author:** ![luukschoen](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/luukschoen/32/98585_2.png) [@luukschoen](https://forum.ionicframework.com/u/luukschoen)\
**Post date:** [May 15, 2017, 5:56pm UTC](https://forum.ionicframework.com/t/unnecessary-top-padding-in-toolbar/90366/4 "2017-05-15T17:56:50Z")

</div>

> [@lucifer\_AM](#):
>
> debug it on the device with the safari inspector"  
> Thanks that helped a lot. 😃

Why the sarcasm? If you’re setting statusBarOverlaysWebview to False like you’re doing, you can expect this behavior since you now force the statusbar on top of the app, not over your app. Hence the extra padding. Why are you setting it to false?

---

<div class="post-metadata">

**Author:** ![lucifer\_AM](https://avatars.discourse-cdn.com/v4/letter/l/e68b1a/32.png) [@lucifer\_AM](https://forum.ionicframework.com/u/lucifer_AM)\
**Post date:** [May 16, 2017, 5:47am UTC](https://forum.ionicframework.com/t/unnecessary-top-padding-in-toolbar/90366/5 "2017-05-16T05:47:45Z")

</div>

Well I found the css classes which had the dynamically calculated padding-tops as well as the min-heights. I fixed this by manually setting a fixed height and padding-tops to the resp. classes in app.scss.

Thanks.

---

<div class="post-metadata">

**Author:** ![codiqa100065033](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/codiqa100065033/32/113878_2.png) [@codiqa100065033](https://forum.ionicframework.com/u/codiqa100065033)\
**Post date:** [October 4, 2017, 10:48pm UTC](https://forum.ionicframework.com/t/unnecessary-top-padding-in-toolbar/90366/6 "2017-10-04T22:48:29Z")

</div>

Hi I have the same problem.

> I fixed this by manually setting a fixed height and padding-tops to the resp. classes in app.scss.

Could you please share the part in your app.scss ?