Navbar is under the Status bar on ios simulator

ionic-v1
21

See this topic : The Status Bar Issue on IOS7

22

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?

23

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

24

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>
25

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

26

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!

27

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!!!

28

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?

29

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

30

Look in plugins/ios.json and find StatusBarOverlaysWebView ā€“ make it false

31

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.

32

status bar, statusbar, marked.

33

You could also set a preference in config.xml:

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

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

1 Like
35

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

36

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?

37

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
38

2 years past, any solution to this? 0_o

1 Like
39

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

40

Thanks @credli, that worked for me !