How to remove tab-bar padding?

Ionic Framework Ionic Angular
1

download

How can I remove paddings from start and end of ion-tab-bar?

Code

HTML

<ion-tabs>
  <ion-tab-bar class="myTabs" slot="bottom">
    <ion-tab-button tab="groups">
      <ion-icon name="chatbubbles-outline"></ion-icon>
      <ion-label>Chat</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="settings-outline"></ion-icon>
      <ion-label>Pengaturan</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

CSS

.myTabs {
    --background: #f1c40f;
}

.tab-has-label {
    --background: none;
    --color-selected: #2c3e50;
    --color: #718093;
}

.tab-selected {
    --background: #e1b12c;
}

Any idea?

2

nobody has solution?

3

Have you tried to remove the padding from the button? That should be the case.

ion-tab-button{
    --padding-start: 0px;
    --padding-end: 0px;
}
4

Unfortunately that doesn’t work.

5

Came here to find a solution, so thought I would share my finding.
If you inspect you won’t find any padding, in my case it was related to a defined max-width.

Added the following css fixed the issue:

    ion-tab-button {
        max-width: inherit;
    }
1 Like
6

oh… it saves my life.
thank you !!