Dynamic size of ion-tab


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>

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%'"
style="width: '200px'"

but none worked.


Please help thanks.


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)