Skip to content
This repository has been archived by the owner on May 4, 2022. It is now read-only.

Changing orientation mode puts ionic tabs above header, overlapping the statusbar #884

Open
ionitron-bot bot opened this issue Dec 8, 2018 · 0 comments
Labels

Comments

@ionitron-bot
Copy link

ionitron-bot bot commented Dec 8, 2018

Original issue by @warri93 on 2018-01-04T10:46:35Z

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[X] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request

Current behavior:
I checked out the ionic tabs starter (ionic-angular 3.9.2) and ran it on my ipad (iOS 10.3.3). When selecting another tab and then switching the orientation from portrait to landscape, the tabs are placed above the header bar. The tabs are also overlapping the statusbar when this happens. (.tabbar.show-tabbar is getting a top 0 which should be 64px)

After this, if you do another interaction on the screen, tabbing on a different tab for example, the tabs are placed under the header bar again and top is set to 64px. (still in landscape mode)

When switching orientation mode back to portrait a top of 0 is applied to the tabbar again, resulting in overlapping the statusbar.

Expected behavior:
The tabs should not be positioned above the header bar and overlap the statusbar when switching orientation.

Steps to reproduce:
Start the ionic starter application with tabs and click on a different tab. After that switch from portrait mode to landscape => tabs are above header and overlapping the statusbar.

Related code:
.tabbar.show-tabbar is getting a top 0 which should be 64px

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : ios 4.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.1 
    ios-sim           : 4.1.1 
    Node              : v8.9.2
    npm               : 5.5.1 
    OS                : macOS Sierra
    Xcode             : Xcode 9.2 Build version 9C40b 

Environment Variables:

    ANDROID_HOME : /Users/melissawarrens/Library/Android/sdk

Misc:

    backend : legacy
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

0 participants