Ion-Tabs with Overflow

Question

Is it possible to give the ion-tab tag a style property to make them slideable.

I tried it and it works, but it doesn't look nice.

One of the tabs is not displayed completely.

HTML

<ion-tabs>

<ion-tab-button tab="registrieren">
  <ion-icon name="person-add"></ion-icon>
  <ion-label>Registrieren</ion-label>
</ion-tab-button>

<ion-tab-button tab="aufnahme">
  <ion-icon name="add-circle"></ion-icon>
  <ion-label>Aufnahme</ion-label>
</ion-tab-button>

<ion-tab-button tab="entfernen">
  <ion-icon name="remove-circle"></ion-icon>
  <ion-label>Entfernen</ion-label>
</ion-tab-button>

<ion-tab-button tab="standortwechsel">
  <ion-icon name="md-car"></ion-icon>
  <ion-label>Übergabe</ion-label>
</ion-tab-button>

<ion-tab-button tab="admin-bestand">
  <ion-icon name="ios-albums"></ion-icon>
  <ion-label>Bestand</ion-label>
</ion-tab-button>

<ion-tab-button tab="system">
  <ion-icon name="settings"></ion-icon>
  <ion-label>System</ion-label>
</ion-tab-button>

If i scroll to the right side, the System Tab is displayed properly. But if i scroll to the left, the Registrieren Tab is not displayed properly.

Answer 1

CSS

ion-tab-bar {
   overflow-x: scroll;
   justify-content: left;
}