Ionic-framework: Ionic 3.7.1 hides the toolbar / content on orientation change

Created on 25 Oct 2017 · 5Comments · Source: ionic-team/ionic-framework

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:
Clicking on the tabs and rotating the screen would hide the toolbar or content. If we don't click on the tabs then everything works fine. Screencast -> http://recordit.co/A9Z9qu6USk

Expected behavior:
Screen orientation change shouldn't hide the toolbar / content

Steps to reproduce:

Create new ionic app using the tabs template
ionic start demo tabs
In app.module.ts configure the tabs placement to be on top with below change

 IonicModule.forRoot(MyApp,{
      tabsPlacement: 'top',
      mode: 'md',
    })

Install ionic-angular version 3.7.1 or 3.7.1-201710241735
Run the app on your device
ionic cordova run android
Without clicking on Tabs rotate your device - everything would work fine and toolbar still shows.
Click on any of the tabs and then rotate your device - Toolbar will be hidden

Other information:

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.13.0
    ionic (Ionic CLI) : 3.13.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 3.0.0-201710161925
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.7.1-201710241735

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.2
    ios-sim           : 5.0.8
    Node              : v8.4.0
    npm               : 5.3.0
    OS                : macOS Sierra
    Xcode             : Xcode 9.0.1 Build version 9A1004

Misc:

    backend : legacy

Source

harshabonthu

All 5 comments

Hmm, the problem here is the tabsPosition being top and the layout/setup we have in v3. I think moving the tabs to be the default bottom position might be the better way to "fix" this until we revisit the layout of ion-tabs/ion-content/ion-footerHeader

mhartington on 27 Oct 2017

👎1

In my case, move the tab to bottom position is not a good solution. I'm using 2 tabs for different purposes, so have both on the same position can cause some confusion for my users.
I could fix this issue just adding a class attribute on my and on scss:
.MyTabClass{ .tabbar{ top: 58px !important; } }

rodrigosoareschaves on 21 Nov 2017

👎1 👍1

Did anyone find a solution for this?

@mhartington the current client design does not accept the tabs at the bottom of the screen. and possibly in future will have tabs both at the top and bottom.

@rodrigosoareschaves the top position differs between platforms so setting the css to specific pixel is not working in my case.

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

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2
Node       : v8.9.1
npm        : 5.5.1
OS         : macOS High Sierra
Xcode      : Xcode 9.3 Build version 9E145

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

Brendan92 on 12 Apr 2018

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!