Ionic-framework: style of <ion-tabs> set the opacity to 0

[tamashii]

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:
Tab bar not appearing, and it's css-style set opacity to 0.

Expected behavior:
A tab bar should be appear in bottom of page.

Steps to reproduce:

1. Create a blank project
2. Remove all codes from home.html
3. Add tabs to home.html

Related code:
Modified home.html:

<ion-tabs>
  <ion-tab tabTitle="Tab1" [root]="tab1"></ion-tab>
  <ion-tab tabTitle="Tab2" [root]="tab1"></ion-tab>
  <ion-tab tabTitle="Tab3" [root]="tab1"></ion-tab>
</ion-tabs>

Other information:

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

cli packages: (%APPDATA%\npm\node_modules)

    @ionic/cli-utils  : 1.15.0
    ionic (Ionic CLI) : 3.15.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Node : v6.11.4
    npm  : 3.10.10
    OS   : Windows 7

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Partial of generated main.css content:

.tabbar {
  left: 0;
  bottom: 0;
  position: absolute;
  z-index: 10;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  opacity: 0;
}

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having? Thanks for using Ionic!

[shootdaj]

I was having the same issue until I put the contents of the tab view inside "<ion-content>" tag. Ionic is really weird about exactness of semantic structure. It's hard to learn because it doesn't ever tell you something is wrong, you just have to figure it out by experimenting.

[kensodemann]

Hello! As it seems it has been a while since there was any activity on this issue I am closing it for now. Feel free to comment if you are still running into this issue.

If you are still having the issue, please be sure to include a GitHub repo with a sample application.

Thanks for using Ionic!

[melicodes]

Hi, i am getting this issue also.

[bastiantowers]

I'm having this issue too, and I've already wrapped the tabs component within an ion-content tag and it didn't fixed it.
Apparently, if I set the opacity: 1 to .tabbar class, it gets fixed, but it sounds more like I am doing a "hack" and it does not appear to be a clean solution.
Does anyone have more information about this? Thanks!

[giovannipds]

Does anybody found a different solution than setting opacity: 1 on .tabbar?

[giovannipds]

This error seems to happen only when tab page is not properly defined.

Here's a working repository in the latest Ionic version:
https://github.com/giovannipds/ionic-tabbar-opacity-0

This issue must remain closed (at least for the latest Ionic version).

[giovannipds]

Tested with this info:

√ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)  : 4.0.6 (C:\Users\Giovanni\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

System:

   NodeJS : v6.11.2 (C:\Program Files\nodejs\node.exe)
   npm    : 3.10.10
   OS     : Windows 10

[giovannipds]

ping @bastiantowers @melicodes @tamashii

[Jcortesjara]

The error is becuase the class show-tabbar is not added to the div with tabbar class, i dont know why this occurs.

[bastiantowers]

@giovannipds I fixed this issue setting the opacity of .tabbar to 1 and I never returned to this anymore. Let me try that repo and I will write you again in a moment

[giovannipds]

@bastiantowers Hi. It's working there to me. That seems to just happens when the tab page is not properly defined.

[bastiantowers]

@giovannipds what d'you mean with 'the tab page is not properly defined'? With this line over here? -> https://github.com/giovannipds/ionic-tabbar-opacity-0/blob/master/src/pages/home/home.ts#L10

[giovannipds]

@bastiantowers I meant: if you do not have a tab assigned to <ion-tab root>, it'll put opacity to 0.

[bastiantowers]

@giovannipds I got defined the root attribute in my project and that doesn't seem to be the problem. I saw that you only have one tab only. Have you tested this with more than one tab? Can you test it adding a tab2 with different content and tell us if the opacity issue appears then? Thanks!

[giovannipds]

@bastiantowers I'll test it. I'll also make a branch showing the error, ok? Regards.

[giovannipds]

@bastiantowers Here it goes, showing the error (I also update the README.md and files: https://github.com/giovannipds/ionic-tabbar-opacity-0

And there also the working sample with two tabs you've requested on separated branch: https://github.com/giovannipds/ionic-tabbar-opacity-0/tree/two-tabs

[giovannipds]

My ionic info:

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

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

local packages:

@ionic/app-scripts : 3.1.11
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v8.11.3
npm  : 5.10.0 
OS   : macOS High Sierra

Misc:

backend : pro

[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.