<ion-tab> badge is positioned incorrectly when icon-off is not supplied

ionic-v1
#1

http://ionicframework.com/docs/api/directive/ionTabs/

When choosing to use the title instead of the the “icon-off”, the badge is positioned horribly.

Also, why can’t we have an Icon AND text?

#2

I’m surprised, in our app we use tabs with icons, text and badges and it renders well on iOS and Android.

image

#3

Remove the icon-off field so that just the title will be displayed when the tab is not selected, and you will see what I’m talking about. Also, how are you getting the text below the icon. I’ve looked at numerous examples and I still can’t manage to make it show up.

#4

I’ll tell you tomorrow when I’m in the office.

#5

Here is my code, as you can see, some ion-tab have a badge, a title but no icon-off and it works.

<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-controller="TabsCtrl">

  <ion-tab title="Accueil" icon="ion-home" ui-sref="tab.home">
       <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Achat" icon-off="ion-ios-cart-outline" icon-on="ion-ios-cart" ui-sref="tab.panier" badge="badges.panier" badge-style="badge-assertive">
       <ion-nav-view name="tab-achat"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Portefeuille" icon="ion-bag" ui-sref="tab.portefeuille" badge="badges.portefeuille" badge-style="badge-assertive">
        <ion-nav-view name="tab-portefeuille"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Historique" icon-off="ion-ios-book-outline" icon-on="ion-ios-book" ui-sref="tab.historique" badge="badges.historique">
         <ion-nav-view name="tab-historique"></ion-nav-view>
  </ion-tab>

</ion-tabs>