Ionic-framework: Page navs and overlays with tabs view will overlap with iOS statusbar

[wli]

Short description of the problem:

Page navs and overlays with tabs view will overlap with iOS statusbar. This was fixed for other views (in https://github.com/driftyco/ionic/issues/6154), but doesn't work with tabs.

What behavior are you expecting?

It should not overlap.

Steps to reproduce:

1. From a tabs page, call nav.push

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
Originally addressed in https://github.com/driftyco/ionic/issues/6154 via https://github.com/driftyco/ionic/commit/f45ddf90878dd60a1e997aa3e1ec34e0575bcff2

As you can see, the new selector ion-navbar-section.statusbar-padding > .toolbar does not apply to the page inside the tab, since there is no ion-navbar-section.

Cleanest solution seems to be creating a new rule ion-tab ion-navbar.statusbar-padding.toolbar, but I will leave it up to the ionic team to decide (maybe @brandyscarney can chime in here)

Which Ionic Version? 2.0.0-beta.6

Run ionic info from terminal/cmd prompt: (paste output below)
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.5
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.8.0
Xcode version: Xcode 7.3 Build version 7D175

[brandyscarney]

Thanks for the issue! I'll look into this soon.

[brandyscarney]

Hmm I am not able to reproduce this in our e2e test (https://github.com/driftyco/ionic/tree/2.0/ionic/components/app/test/cordova) or in the conference app (https://github.com/driftyco/ionic-conference-app/). Is there anything else going on besides navigating to a new page inside of tabs?

Here's a gif of what I see: http://g.recordit.co/BictqlhckJ.gif

[abuechler]

@brandyscarney I noticed the same issue. When I run my app in the simulator, I don't see it, but I get it when running it on iPad 2/ iPhone 5 with Ionic View.

[brandyscarney]

@abuechler Thank you for that info! I was able to reproduce it that way. :smile: I'll have to look into whether this issue is with the framework or the view app itself.

Please let me know if anyone has steps to reproduce it in a simulator or on a device outside of view. Thanks!

[brandyscarney]

Also, @abuechler, as a temporary work around for it not working in view, you could set statusbarPadding: true in the config. This will show the padding when the platform is ios no matter where you view it though (including the browser):

@App({
  templateUrl: 'build/app.html',
  config: {
    platforms: {
      ios: {
        statusbarPadding: true
      }
    }
  }
})

[wli]

@brandyscarney If it helps, I have 'tabSubPages': true set in my app's config block.

[wli]

I'm actually a bit unclear what that does - the documentation is a bit sparse on the subject: http://ionicframework.com/docs/v2/api/config/Config/

[abuechler]

@brandyscarney Ok, that works. Thanks!

[brandyscarney]

@wli The tabSubPages property hides the tabs section on child pages of the tab. Material Design does this by default, but iOS does not. I am able to reproduce the issue now. Thank you! Will look into a fix.

I agree we need to add more documentation behind the config properties. I think this is something we'll fix with this issue: https://github.com/driftyco/ionic-site/issues/585

[brandyscarney]

@abuechler I created an issue for the Ionic View app not showing the status bar padding. This is something that will have to be resolved in the Ionic View app itself: https://github.com/driftyco/ionic-view-issues/issues/164

[brandyscarney]

This will be fixed in the beta.7 release. Thanks again for the issue!

[EugeneSnihovsky]

I have same issue on beta.7 release in ios emulator on ipad2, iphone5 and others.
I used custom navbar component with ion-navbar component inside.

Custom navbar component example:

<div #content>
    <ion-navbar *navbar>
        <button menuToggle end>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>
            Dashboards
        </ion-title>
    </ion-navbar>
</div>
<ion-menu side="right" [content]="content">
    <ion-toolbar class="ion-menu-logo">
        <ion-title>Menu</ion-title>
    </ion-toolbar>
    <ion-content>
        <ion-list>
            <button class="ion-menu-button"
                    ion-item
                    menuClose
                    (click)="logOut()">
                <ion-icon item-left name="log-out"></ion-icon>
                Log out...
            </button>
        </ion-list>
    </ion-content>
</ion-menu>

'use strict';

import {IONIC_DIRECTIVES} from 'ionic-angular/config/directives';
import {Component} from '@angular/core';
import {AuthService} from '../../../shared/services/$http/core';

@Component({
    selector: 'top-navbar',
    templateUrl: 'build/components/navigation/top-navbar/top-navbar.html',
    directives: [IONIC_DIRECTIVES]
})

export class TopNavBarComponent {
    constructor(
        private auth: AuthService
    ) {

    }
    public logOut() {
        var self = this;
        self.auth.logout();
    }
}

In CSS just change background:

.toolbar-background {
      background: rgba(255,255,255,0.5);
    }

Custom navbar component usage:
Just add element to DOM @page template

<top-navbar></top-navbar>

<ion-content>
    <h1>Dashboards page</h1>
</ion-content>

Screen example

Ionic info:

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.7
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: v6.1.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[gxsjtu]

in beta 11 and ios platform, if i set tabsHideOnSubPages: true, navbar is still overlapped with status bar.
please check.

[gurisko]

I was also able to reproduce with tabsHideOnSubPages: true in ios simulator (not in Ionic View).

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.7
Xcode version: Xcode 8.0 Build version 8A218a

[kamok]

This issue still exists. However, only pages that you push onto the tabs have this.

Confirm on Ionic View and iOS emulator

[lostdev]

This is still an issue on iOS when setting , tabsHideOnSubPages: true. Does anyone have a workaround?

Ionic info:

cli packages: (/Users/user131554/Downloads/mobile/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    ios-deploy : 1.9.2 
    ios-sim    : 6.0.0 
    Node       : v6.10.2
    npm        : 3.10.10 
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 

[bangonkali]

Please check this out. It totally removed the entire 20px including bat indicator on top of the main area. Not something some of you may want, but it in my case it was good enough.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.