Changing ion-tabs width

ionic-v1
1

I’m trying to customize the ion-tabs system. Currently I have 4 tabs with the same width by default (about 80px). I was trying to figure out where in the css the width element is set but without luck.
I’ve been trying for a while to change and add the width element for some classes and also for my unique tab id but none of this lead me to the solution.

Any suggestion to this issue?

2

try using the max-width attribute if you don’t wanna fiddle with the flex

if it’s not sufficient then you’re probably going to use flex

3

@ysrael i’ve just checked it and it works fine on the “a” tag which is built in at the tabs system and not set by the user. Do you have any idea how to reach that “a” specific class for each tab?

here’s example of the created “a” tag:

<a ng-class="{'tab-item-active': isTabActive(), 'has-badge':badge, 'tab-hidden':isHidden()}" class="tab-item tab-item-active" ng-click="setState('app.goals-world');" icon-on="tab-feed-on" icon-off="tab-feed-off"><!-- ngIf: badge --><!-- ngIf: getIconOn() && isTabActive() --><i class="icon tab-feed-on" ng-if="getIconOn() &amp;&amp; isTabActive()"></i><!-- end ngIf: getIconOn() && isTabActive() --><!-- ngIf: getIconOff() && !isTabActive() --><span class="tab-title ng-binding" ng-bind-html="title"></span></a>
4

just add the class on the ion-tab

jesus christ the ionic forum image won’t work I could have easily pasted a screenshot instead

1 Like
5

Adding class to ion-tab with max-width isn’t working :
It’s getting override by this class/classes: .tabs .tab-item - which include max-width:none;

6

put your custom class after the ionic classes or use !important

1 Like
7

!important did the trick. Thanks alot!