CODEWITHSUNDEEP
ionic2ionic3
chrispytoes
chrispytoes

Reputation: 1889

Tab buttons exist but are not visible

I have a tab component with two tabs. The buttons are clickable, and clicking on where the buttons should be is correctly displaying the tab contents, but the buttons are invisible.

<ion-header>
  <ion-navbar>
    <ion-title>{{coupon.title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="coupon-image-container">
    <img src={{coupon.mainImage}}/>
    <button ion-button class="left">Redeem</button>
  </div>
  <ion-tabs class="coupon-tabs">
    <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
    <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
  </ion-tabs>
</ion-content>

I don't think any other code is necessary but I'll provide more if needed. Like I said the contents of the mapTab and infoTab components are showing up fine, and clicking on where the tab buttons should be is switching between them, but the buttons are just blank white.

Edit: Just in case someone was going to ask, it still does the same thing if I remove everything else in the component except for the tab component like so:

<ion-tabs class="coupon-tabs">
  <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
  <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
</ion-tabs>

So it definitely has nothing to do with the other content.

Edit: I made a gif showing the problem: http://g.recordit.co/WDkjkSz6re.gif

Edit: Here's the styles on ion-tab

element.style {
}
main.css:25224
.coupon-tabs ion-tab {
    color: black;
    top: 56px;
}
main.css:5136
ion-tab.show-tab {
    display: block;
}
main.css:5145
ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page {
    contain: strict;
}
main.css:5132
ion-tab {
    display: none;
}
main.css:5128
ion-nav, ion-tab, ion-tabs {
    overflow: hidden;
}
main.css:5116
ion-app, ion-nav, ion-tab, ion-tabs, .app-root {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

main.css:4986
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
Inherited from ion-tabs.coupon-tabs.tabs.tabs-md.tabs-md-primary
main.css:25219
.coupon-tabs {
    position: relative;
    color: black;
}
main.css:4986
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

Upvotes: 8

Views: 3265

Answers (3)

Gaurav Saluja
Gaurav Saluja

Reputation: 713

Mine was because i initialised the tabs properties in the top of the class instead of the constructor

This one below doesn't work.

export class TabsPage {
    tab1 = Page1;
    tab2 = Page2;

    constructor() {}
}

This one worked fine.

export class TabsPage {

  tab1: any;
  tab2: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.tab1 = Page1;
    this.tab2 = Page2;
  }

}

Also, for some reason tabs were not showing up on the screen, although they were present in the DOM, maybe because i had nested tabs in my app. So had to add this in the tabs-page.scss

.tabbar {
    opacity: 1;
}

Upvotes: 0

babycakes
babycakes

Reputation: 546

Look for class .tabbar and check its opacity. Change it if needed.

Upvotes: 2

masterpreenz
masterpreenz

Reputation: 2290

do this instead:

<ion-tab icon="ion-map" title="Map"></ion-tab>
<ion-tab icon="ion-ios-information" title="Info"></ion-tab>

after you do this you might have noticed that text do not appear, though the text did appear but it was way below the icon and was hidden by overflow. You might need to move the text a bit higher with position: relative; top: -XXpx or make parent overflow: visible.

If you aren't building the project with typescript I guess the issue was tabTitle and tabIcon was not translated properly to the example above or If you we're building this project with typescript then it fails to translate the attributes to its proper way.

hope that helps

I saw some other issues in google related to this

Upvotes: 0

Related Questions