Excessive padding top in the navbar

Ionic Framework ionic-v3
1

There’s a strange excessive padding top in my navbar. I’m simply using:

<ion-header>

  <ion-navbar align="center">
    <ion-title><span class="page-title">Edit Profile<span></ion-title>
  </ion-navbar>

</ion-header>

The only CSS i’m using is in the page-title span and it’s only font related. The strangest part is that in the ionic lab everything seems to work fine with no padding but when i run the app in my iPhone the padding appears:

Ionic Lab screenshot:

lab
lab.png447×755 24.5 KB

iPhone screenshot:

iphone
iphone.png640×1136 39 KB

2

If you strip it back the bare minimum, what happens?

<ion-header>
  <ion-navbar>
    <ion-title>Edit Profile</ion-title>
  </ion-navbar>
</ion-header>
3

You have also not closed your span tag … it should be </span>

4

i think @d6hl3tn is right. You don’t close the span tag like this </span>

5

Even if i just to

<ion-header>

  <ion-navbar>
    <ion-title></ion-title>
  </ion-navbar>

</ion-header>

the padding does not disappear.

(I have also closed the span tag now, thanks for pointing that out)

EDIT: One thing i forgot to mention this is happening in all the pages of the app. Also, if i view the app with IonicView everything is fine (no padding).

6

your device is VIVO am I right? so basically it is android so an exta height will be added in navbar for android material design purposes. The one that your taking look at is IOS Design which will switch the design for native look… maybe you don’t check the Android platform in Ionic Lab (ionic serve)…

7

It’s actually an iPhone. Vivo is my carrier.

8

oh i see strange behavior really…

9

Have you made any changes to the theme in variables.scss or global style changes in the app.scss?

10

I think the extra padding on the top of navbar is for the status bar…

1 Like
11

I think the extra padding on the top of navbar is for the status bar…

exactly… it looks like the status bar is outside the webview.

Have you made any changes to the theme in variables.scss or global style changes in the app.scss?

no.

12

first of all find which css of padding apply by default in your navbar using Inspect Element.because sometime it will automatically add few tag in html if you notice.after that remove those css .

13

Problem is that in the browser (ionic serve and lab) everything is fine. The padding only appears in the app when installed on the device, where i can’t use Inspect Element.

14

@felipegrin
which iPhone you used for testing ?
add custom device in chrome browser.
use same configuration of your phone to test app in chrome in mobile view.
after that see what happens.if issue remain same then you can manage to find the problem by inspect element.

15

Did you find a solution to this? @felipegrin

16

Not exactly. What i did was to start a new project with “ionic start”, then install all the plugins I was using and copy & paste all my code again to this new project. For some strange reason, this new project didn’t have this problem, even though it had the exact same plugins and code than the other one.

17

I updated my ionic-angular npm package and that solved my issue:

npm install ionic-angular@latest --save