Ionic 2 - navbar is overlapping status bar in ios

Ionic Framework ionic-v3
1

i built the ionic 2 conference app sample …(latest with ionic 2.alpha42) and added iOS platform. while building it, the CLI showed that it installed “cordova-plugin-statusbar” for ios. but when i run it on an iphone the navbar and status bar are overlapping. how do i fix it?
p.s. this problem did not exist when i used previous version - ionic2.alpha38

2

This is fixed in the latest release alpha.44

https://github.com/driftyco/ionic2/issues/748

3

oh thanks, how do i update it? im using alpha.42.

4

I temporarily fixed this by adding following line to www/app/app.ios.scss:
@import “…/…/node_modules/ionic-framework/platform/cordova-ios”;

5

Yes, that import was missing from the Ionic source, but it has been fixed in the latest release (2.0.0-alpha.44): https://www.npmjs.com/package/ionic-framework

@teknofreek: You can update by changing the version of ionic-framework in your package.json file:

"ionic-framework": "2.0.0-alpha.42",

becomes:

"ionic-framework": "2.0.0-alpha.44",

and then you can run npm install from a terminal from the root of your project.

There are also some other ways, see: http://ionicframework.com/docs/v2/getting-started/concepts/

1 Like
6

i got a warning

WARN EPEERINVALID ionic-framework@2.0.0-alpha.44 requires a peer of angular2@2.0.0-beta.0 but none was installed.

7

this is not a good idea… there are a slew of dependencies that then cause issues when updating to the latest version of angularjs

8

Yeah, you’re right. Since we introduced Angular as a peer dependency the best way to update is:

npm install ionic-framework@latest --save

cc @teknofreek

1 Like