Unnecessary top padding in toolbar

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

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?

2 Likes

Yes I have done it in config.

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

also i have done this in app.module.ts

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

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

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?

1 Like

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.

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 ?