Navbar is under the Status bar on ios simulator

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?

I will try that, but it occurred to me that I didn’t mention I’m running this in ionic-view. Does that make a difference?

To solve my problem with this I created a directive and put it in the body. Tested it on the simulator using the livereload option.

app.directive('printHtml', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $timeout(function() {
        console.log(attrs.$$element[0].outerHTML);
      }, 3000); 
      // Using $ionicPlatform.ready may be better
    }
  }
});

Then copied the content printed on the terminal and pasted it on a html file. Opened it in a browser and I saw what the problem was. In my case was the class name.

If it’s only happening on the Ionic view app… Instead of printing it I would make a POST request to any place such as a local server.

1 Like

2 years past, any solution to this? 0_o

1 Like

I solved this by adding the statusbar plugin:

cordova plugin add org.apache.cordova.statusbar

and adding this line to my config:

<preference name="StatusBarOverlaysWebview" value="false"/>

I’m new with Ionic and somewhat new with cordova on iOS and this seems like a kinda critical problem…

Solution source

Thanks @credli, that worked for me !

i try many way, but it not effect.
finally do those step solve my problem:

  1. add plugin StatusBar:

cordova plugin add org.apache.cordova.statusbar

  1. remove this code from app.js:

ionic.Platform.fullScreen();

Hope this help!.

I had same issue in $ionicModal so user would feel hard to touch close modal button.

The problem was I was using {{someVar}} in class attr.

EX : class=“bar bar-{{themeColor}}”

I wanted to change depends on themeColor var.

After I replaced ng-class, problem resolved.

I had already tried everithyng in this topic and doens’t work, can anyone help me?

image

From: http://www.sitepoint.com/5-ionic-app-development-tips-tricks/

Ionic has specific classes to deal with this – platform-ios and platform-cordova. Ionic’s pre-built elements target those classes and add in 20px top margin to the buttons in your header to make up for these situations. To get my own custom elements to do the same, I follow the same pattern. For my .search-bar above, I add a margin if we’ve got a .platform-ios.platform-cordova:not(.fullscreen) body class. Example:

.platform-ios.platform-cordova:not(.fullscreen) .search-bar {
margin-top: 20px;
}
This should be the correct answer. It worked for me.