CODEWITHSUNDEEP
ionic-frameworkionic4
AppleForTheKing
AppleForTheKing

Reputation: 105

Ionic 4: Ionic Tab Bar isn't displayed in Chrome

I am trying to make Website with a Tab-Bar at the top. It all seems to work in Firefox and Edge, but in Chrome it doesn't show the tab-bar at all. My home.page.html looks like this:

<ion-header>
  <ion-tabs>
  <ion-tab-bar slot="top">

    <ion-tab-button tab="home">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Am besten bewertet</ion-label>
      <ion-icon name="heart"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Trends</ion-label>
      <ion-icon name="ice-cream"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="new">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Neueste</ion-label>
      <ion-icon name="clock"></ion-icon>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>
</ion-header>

Any ideas?

Upvotes: 1

Views: 1001

Answers (1)

Ira Watt
Ira Watt

Reputation: 2135

The ion-tab-bar has display: flex; and height:100% in its styles which causes it not to render in chrome for whatever reason but you can get round it by adding style="display: contents;" to the ion-tab-bar element and it will displayed properly.

<ion-header>
  <ion-tabs style="display: contents;">
  <ion-tab-bar slot="top">

    <ion-tab-button tab="home">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Am besten bewertet</ion-label>
      <ion-icon name="heart"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Trends</ion-label>
      <ion-icon name="ice-cream"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="new">
      <ion-router-outlet name="one"></ion-router-outlet>
      <ion-label>Neueste</ion-label>
      <ion-icon name="clock"></ion-icon>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>
</ion-header>

Upvotes: 1

Related Questions