Navbar is under the Status bar on ios simulator

I see correct status bar first time I run it from xcode, second time I run it by phonegap run ios its not working. Its getting annoying because not sure if its bug or what :frowning:

I was having intermittent problems like that too. It went away a while back. Check this. After running a build, look at the compiled config.xml file. Does it still have the settings you gave it?

If not, the problem is the defaults.xml file is overwriting your own. See : http://stackoverflow.com/questions/20883548/phonegap-access-origin-restrictions-dont-work.

Dabble with that and see if you can get it to stop.

Wow, finally I was able to trace this down thanks to @Calendee, I removed unnesesarry from default.xml and moved all important to my config, what was missing in some part was this line, so I moved this to my config.xml.

<feature name="Device">
    <param name="ios-package" value="CDVDevice" />
</feature>

This is what I hate about phonegap, they are changing this plugin stuff so fast that if you are not like every week on it, you lost it :slight_smile: and their documentation just sucks.

Thanks again Justin!

1 Like

Glad it helped. It kicked my butt for a while too. Then, I forgot to post anything about it. This should be a good reminder to anyone else having trouble.

Tags : status bar, statusbar

Still seeing this issue on salamander. I hope it gets worked out with the Beta. I’ve tried the above to no avail.

1 Like

See this topic : The Status Bar Issue on IOS7

I installed the latest version of ionic today, made sure cordova was at 3.4.1 tried credli’s advice to uninstall and re-install the the cordova device and status bar plugins. The status bar still overlaps. Any other suggestions?

I had this problem when I added the Google Maps script. What fixed it for me was to add that particular script before any other script in the <head> section of the index.html.

Check this: Header over status bar problem when using Google Maps

Just tried that an no luck.

<script src="js/accounting.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/angles.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/filters.js"></script>

So I just commented out the google maps script as seen above and the status bar is right now. Any other suggestions?

This is what I have in my <head> in index.html.

  <head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Hello World</title>

<link href="vendor/ionic/css/ionic.css" rel="stylesheet">
<link href="vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/page1.css" rel="stylesheet">
<link href="css/page2.css" rel="stylesheet">
<link href="css/page3.css" rel="stylesheet">
<link href="css/page4.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- google maps -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>

<!-- ionic/angular js -->
<script src="vendor/ionic/js/ionic.js"></script>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-animate/angular-animate.js"></script>
<script src="vendor/angular-sanitize/angular-sanitize.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script src="vendor/ionic/js/ionic-angular.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>

Maybe try this:

  1. Add an API key to your Google Maps script
  2. Put it above “js/accounting.min.js”. It should really be imported before any other JavaScript.

Tell me if this works out for you!

Close! Oddly enough the only ordering that worked for me was this

    <!-- cordova script (this will be a 404 during development) -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/accounting.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/angles.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/filters.js"></script>

Thanks for your help!!!

I’m facing the same issue and I can’t seem to figure how to fix it =/.

Device plugin is added, I’m not using google map, as you can see on the screenshots, the bar in the side menu is ok (in a modal too). I see the nav bar of the main view moving up less than a second after application starts.

Any ideas?

I get this seemingly randomly as well, despite trying all the solutions in the thread.

Look in plugins/ios.json and find StatusBarOverlaysWebView – make it false

Well, this is two months old but if anyone is facing the same problem and the html for that bar looks like this:

<ion-nav-bar class="bar-header">
  ...
</ion-nav-bar>

Remove bar-header and it will solve that extra margin.

status bar, statusbar, marked.

You could also set a preference in config.xml:

<preference name="StatusBarOverlaysWebView" value="false"/>
1 Like

I have tried every remedy in this thread, and my navbar still overlaps the status bar, but only on the iPhone 5c.

1 Like

Does manually adding platform-cordova and platform-ios classes to the body do anything?