IOS navbar overlaps statusbar

Ionic Framework ionic-v3
1

I was using Ionic View to test my app on an iPhone 5s and noticed that the navbar was directly under the statusbar (without the default margin). So i uploaded the default “MyIonic2Project” tutorial to Ionic View and it seems to do this as well:

image
20160426_082232000_iOS.png640×1136 47.9 KB

Note that i simply did ionic start MyIonic2Project tutorial --v2 --ts and ionic upload
On Andoird it doesn’t do this (neither in Ionic View nor by installing the apk).
Here is my ionic info:

image

Unfortunately I can’t test it on an ios emulator as I don’t have Xcode (yet)…

2

Try to do ionic prepare ios before uploading. Not sure if that is needed though.

3

Still the same. I think it has to do with Ionic View, perhaps not supporting the cordova statusbar plugin?

4

So this doesn’t have anything to do with statusbar plugin.

If this is a new app with beta 6, it might just be the way we check for cordova.
Which is pretty different from v1.

UPDATE: Just tested this out, this is indeed the issue. But it does work on a regular device without view.

5

Thx for the speedy reply! I can continue with my development :slight_smile:. Is there a (temporary) fix that I can apply?

6

Sure, you could add this to your config object for your app.

  config: {
    platforms: {
      ios: {
        statusbarPadding: true
      }
    }
  },
6 Likes
7

Hi @mhartington thanks for your answer. However I would like to know what would it be this config file?

8

I also would like to know what is this “config file” please

9

For beta 9, it would be something like this in your app.ts file

ionicBootstrap(MyApp, null, {
platforms: {
      ios: {
        statusbarPadding: true
      }
    }
});
2 Likes
10

Is this documented somewhere? statusbarPadding isn’t listed as a config property in http://ionicframework.com/docs/v2/nightly/api/config/Config/.

Also, I’m still not seeing the status bar padding in Ionic View after adding that configuration. The statusbar is still overlapping the navbar.

6 Likes
11

I have the same problem.
Any updates ?

12

Yes,
View in your plugin if there " cordova-plugin-statusbar ":

Answer
Yes: In file app.ts valid if exist the next code:

import {StatusBar} from ‘ionic-native’;

constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.show(); // view website for more options Ionic Native - Status Bar
});
}

No: Install the plugin

ionic plugin add cordova-plugin-statusbar

The next step, go answer: Yes, for more information view the website

2 Likes
13

Same issue in RC0…

IonicModule.forRoot(MyApp, [LazyLoadImageDirective], {
        platforms: {
            ios: {
              statusbarPadding: true,
              tabsHideOnSubPages: true
            }
          }
      })
14

Adding StatusBar.overlaysWebView(false); on platform ready solved the issue for me

10 Likes
15

Didn’t work for me unfortunately. I think it’s a problem with the Tab Bar. When I switch mine out and directly navigate pages it’s gone.

16

Any updates? Same issue here

17

This is the solution that worked for me:

In app.module.ts where you import IonicModule:

IonicModule.forRoot(MyApp, {
  platforms: {
    ios: {
      statusbarPadding: true
    }
  }
})
4 Likes
18

I have the problem that the statusbar height changes. On the root view there is no back button and the statusbar is smaller and the title overlaps with the iOS icons. On pages with back button the bar gets larger and the text is correctly positioned.

None of the solutions of this thread did help.

19

The following variable in theme/variables.scss changes the default height:

$toolbar-ios-height: 70px; //default: 44px

However, with back button the statusbar gets event larger. So this is only a partial fix.

Update: using the follow Sass code on the root component works.

page-home {
    .toolbar-ios {
        //workaround: statusbar height is too small on root view without home button
        // -> manually set min-height on root view (verified on iOS 10)
        min-height: 64px;
    }
}
1 Like
20

I solved it this way:
platform.ready().then(() => {
statusBar.hide(); <------