style of set the opacity to 0

Ionic version: (check one with “x”)
(For Ionic 1.x issues, please use
[ ] 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-tab tabTitle="Tab1" [root]="tab1"></ion-tab>
  <ion-tab tabTitle="Tab2" [root]="tab1"></ion-tab>
  <ion-tab tabTitle="Tab3" [root]="tab1"></ion-tab>

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


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

Environment Variables:

    ANDROID_HOME : not set


    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;

Author: Fantashit

1 thought on “style of set the opacity to 0

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

Comments are closed.