Dynamic size of ion-tab

Ionic Framework ionic-v3
1

Hello
I have these tabs, also I am using the scrollable-tabs component provided here:
Scrollable Tabs

<ion-tabs #ionTabs [scrollable-tabs]="ionTabs" [opts]="scrollableTabsopts" selectedTabIndex='0' color="{{tabsColor}}" mode="{{tabsMode}}" tabsHighlight="true" tabsPlacement="{{tabsPlacement}}">
  <ion-tab *ngFor="let tab of tabs" [root]="tab.component" tabTitle="{{tab.title}}" tabIcon="{{tab.icon}}"></ion-tab>
</ion-tabs>

My problem is the resizing of items/icons/text on click of tab,
like in the below example some tabs with larger text when clicked gets much large than its area.

Give me a solution to this or please tell me how do I increase the width of ion-tab?
I tried adding:

style="width: '150%'"
and
style="width: '200px'"

but none worked.

https://gyazo.com/8ab257de649e68f6f6151b7fabed5e87

Please help thanks.

2

In app.scss you could apply a style to .tab-button and give it a min-width/width to make it wider like this:

.tab-button {
   min-width: 150px;
}

Bit in all fairness, I think it’s bad design to have this many tabs. It doesn’t make sense to me to have ten tabs. I believe they’re best used for direct navigation, because they’re directly visible in the viewport. If you create this many tabs, it looses it’s value and I believe you should rethink the design of your app (maybe use a sidemenu, or a stacked navigation on a totally different level)

2 Likes