Loading a CSS overlay makes the status bar overlap

[jfi]

Short description of the problem:

Following on from #6154 (possibly also related to #6368?), if you load an absolutely positioned CSS overlay, the status bar overlaps the content.

What behavior are you expecting?

The status bar should not overlap.

Steps to reproduce:

1. Load an absolutely positioned CSS overlay on a click event.

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

I've created a sample application here which shows the issue. https://github.com/jfi/ionic2-status-issue Reproducing on an iPhone 6 Plus.

Screenshots:

Which Ionic Version? 2.0.0-beta.6

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.2.1
Xcode version: Xcode 7.3 Build version 7D175

[jfi]

Hi @brandyscarney, is there a milestone on this? Thanks! :)

[brandyscarney]

Hey @jfi, this is because the ion-toolbar needs to be the first-child in the page. If you have the div's above the ion-toolbar it won't work. So I recommend moving the overlay divs to the end, after the ion-toolbar:

main.html:

<ion-toolbar id="mainToolbar">
  <ion-buttons start>
    <button (click)="togglePostPicker()">
      new
    </button>
  </ion-buttons>
  <ion-title>logo</ion-title>
  <ion-buttons end>
  </ion-buttons>
</ion-toolbar>

<ion-content>


</ion-content>

<div class="cover" (click)="togglePostPicker()" *ngIf="showOverlay==true"></div>
<div class="overlay" *ngIf="showOverlay==true">
  <div class="image"><img src="img/new_photo_icon.png" (click)="newPhotoPost()"> <p (click)="newPhotoPost()">Photo</p></div>
  <div class="text"><img src="img/new_text_icon.png" (click)="newTextPost()"> <p (click)="newTextPost()">Text</p></div>
</div>

[jgw96]

Hello all! Thanks for opening an issue with us! I will be closing this issue for now as brandy's solution is the correct solution. Also, i will be opening an issue on our docs repo so that we can add this to the documentation. Thanks for using Ionic!