CODEWITHSUNDEEP
angularjsionic-framework
vishnu
vishnu

Reputation: 4599

Highlighting the active tab item in ionic framework

I have created tabs using <ion-tabs>. Every thing was working fine but i am not able to change the active tab background color.

 <ion-tabs class="tabs-striped tabs-positive">
            <ion-tab id="personalDetails" title="Personal" href="#/newcustomer/PersonalDetails" ng-class="{{createUserStatus.personaldetails == true ? 'activeTab': ''}}">
                <ion-nav-view name="newcustomer-PersonalDetails"></ion-nav-view>
            </ion-tab>
            <ion-tab id="familyDetails" title="Family &amp; Housing" href="#/newcustomer/FamilyDetails" disabled="true" ng-class="{{createUserStatus.personaldetails == true ? 'activeTab': ''}}">
                <ion-nav-view name="newcustomer-FamilyDetails"></ion-nav-view>
            </ion-tab>
    </ion-tabs>

I tried using the css, but not working

.activeTab a.tab-item{
  background: red !important;
}

Firebug is looking like this,

enter image description here

I need to apply css for tag. how do i apply?

Upvotes: 0

Views: 2580

Answers (1)

beaver
beaver

Reputation: 17647

You have to override the Ionic CSS class .tab-item.tab-item-active, so for example add into your custom .css file:

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    opacity: 1;
    background: red;
}

Upvotes: 1

Related Questions