When initialize page ion-tabs default not shown in ionic2

Hi, I am new in ionic2/angular2

when open a page tabbar not show, default it was hide

code is
> <ion-tabs class=“tabs-icon-text” [color]=“royal”>

      <ion-tab [root]="tab1Info" tabTitle="Info" tabIcon="home"></ion-tab>
      <ion-tab [root]="tab2Location" tabTitle="Location" tabIcon="information-circle"></ion-tab>
      <ion-tab [root]="tab3Artists" tabTitle="Artists" tabIcon="contacts"></ion-tab>
      <ion-tab [root]="tab4Schedule" tabTitle="Schedule" tabIcon="contacts"></ion-tab>
      <ion-tab [root]="tab5News" tabTitle="News" tabIcon="contacts"></ion-tab>


tab1Info:any = infoPage;
tab2Location:any = locationPage;
tab3Artists:any = artistsPage;
tab4Schedule:any = schedulePage;
tab5News:any = newsPage;

when run page tab initialize but not show
i just check in console elements


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

please help me why it’s happen .
and what’s the solution

and suggest how to use Sass Variables $tabs-md-tab-opacity?

i already solve using scss


opacity: 1;

but i think this is not proper way. please suggest some proper solution with explanation.

Here, here… can we have an answer from someone with ionic2 authority please

According to the docs and forums the idea is to make tab settings at an app level from app.module.ts as in:

imports: [
IonicModule.forRoot(MyApp, {
backButtonIcon: ‘ios-arrow-back’,
tabsHideOnSubPages: false,
tabsPlacement: ‘top’,
tabsHighlight: true

In this case the advice is that “tabsHideOnSubPages: false” is relevant to our problem. However in my case makes no difference - true the tabs are shown on top, but they have still an opacity of 0 :frowning:

I’m using Ionic Framework Version: 2.0.0-rc.1 so maybe an update to the latest version would help… until I do I’ll use your styling workaround :slight_smile: