CODEWITHSUNDEEP
angularjsionic-frameworktabs
rcpilotp51
rcpilotp51

Reputation: 524

ionic tabs - tab without text resize?

Im working on an ionic project where there will be three tabs in the navigation (bottom [top: android]). The right and the left have captions/titles but the center doesnt. I would like to resize the center to an icon only tab when the title attribute is missing.

<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': $root.hideTabs}">

  <!-- Dashboard Tab -->
  <ion-tab title="Check In" icon-off="check-in-icon" icon-on="check-in-icon" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
 </ion-tab>

 <!-- Chats Tab -->
<ion-tab icon-off="add-icon" icon-on="add-icon" ng-click="ctrl.openReimbursmentModal()">
</ion-tab>

 <!-- Account Tab -->
 <ion-tab title="Activity Goals" icon-off="activity-watch" icon-on="activity-watch" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>

Upvotes: 0

Views: 76

Answers (2)

rcpilotp51
rcpilotp51

Reputation: 524

This is what is working for me, thanks to @Flakerimi suggestion.

.tabs .tab-item .icon.add-icon{
    background-size: 38px 38px;
    height:38px;
    // margin-top: 2px;
    opacity: 1;
}
.center-tab{
    span.tab-title{
        display: none;
    }
}

Upvotes: 0

Flak
Flak

Reputation: 2670

You should add #id to tab then inspect what to hide, then do it on css. There is no other way.

Upvotes: 1

Related Questions