Version 1.3 Empty Tab Icon Pushes Tab Title Out of View

[mtpultz]

Short description of the problem:

Originally in v1.2.4 the tabs we had in a modal had no icon and the title was displayed properly, but updating to v1.3 now shows an empty icon that pushes the title down and out of view in the UI:

<a ng-class="{'has-badge':badge, 'tab-hidden':isHidden()}" ng-disabled="disabled()" class="tab-item">
    <!-- ngIf: badge -->
    <i class="icon"></i>
    <span class="tab-title ng-binding" ng-bind-html="title">SEARCH CONTACTS</span>
</a>

What behavior are you expecting?

Was expecting not to see a empty icon and have the title of the tab displayed properly.

Steps to reproduce:

Modal View with Tabs

<ion-modal-view>
    <ion-header-bar class="bar-assertive">
        <div class="buttons">
            <button class="button ion-close"
                    ng-click="contactsCtrl.closeContactsModal()"></button>
        </div>
        <h1 class="title">ADD FRIENDS</h1>
    </ion-header-bar>
    <ion-content style="top:0">
        <ion-tabs class="tabs-assertive">

            <ion-tab title="MOBILE CONTACTS">

                <ion-scroll zooming="false"
                            direction="x">

                    <div ng-include
                         src=" 'features/contacts/templates/contacts.add.html' "></div>

                </ion-scroll>
            </ion-tab>

            <ion-tab title="SEARCH CONTACTS"
                     on-select="contactsCtrl.onSearchSelect()">

                <ion-scroll zooming="false"
                            direction="x">

                    <div ng-include
                         src=" 'features/contacts/templates/contacts.search.html' "></div>

                </ion-scroll>
            </ion-tab>

        </ion-tabs>
    </ion-content>
</ion-modal-view>

ngInclude Tab: contacts.add.html

<ion-content ng-controller="AddContactsController as addContactsCtrl">
    <form name="addContactsCtrl.addForm"
          class="list"
          role="form"
          novalidate>

        <div class="padding">
            <label class="item item-input" name="contact">
                <i class="icon ion-search placeholder-icon"></i>

                <input type="search"
                       placeholder="Search Mobile Contacts"
                       ng-model="addContactsCtrl.search.criteria"
                       ng-model-options="{ debounce: 1000 }"
                       ng-change="addContactsCtrl.getMobileContacts()">
            </label>
        </div>

        <ion-list>
            <ion-item ng-repeat="contact in addContactsCtrl.mobileContacts track by contact.id"
                      ng-click="addContactsCtrl.add(contact)"
                      menu-close=""
                      class="item item-avatar item-icon-right">
                <img ng-src="{{contact.photos[0].value}}"
                     src="http://placehold.it/40/?text=?">

                <h2>{{ contact.name.givenName }} {{ contact.name.familyName }}</h2>

                <p>{{ contact.emails[0].value }}</p>

                <i class="icon assertive ion-android-person-add"></i>
            </ion-item>
        </ion-list>

    </form>
</ion-content>

Which Ionic Version? 1.3.0

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 1.3.0
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS:
Node Version: v5.3.0

[ThomasDalla]

I have the same issue with just normal tabs.
Manually manipulating the DOM and removing the empty icon (<i class="icon"></i>) makes the tab title visible.

[danbucholtz]

This will be in 1.3.1. Sorry for breaking your builds. We switched to direct dom manipulation to remove some jankiness with the move to angular 1.5, I will get this resolved.

[danbucholtz]

@ThomasDalla, @mtpultz, can one of you provide a codepen? On my end it looks okay. I am not sure what it looks like on your end or how to recreate it. Once I can recreate it I can easily fix it.

http://codepen.io/danbucholtz/pen/dMqXem

Thanks,
Dan

[danbucholtz]

I have pushed a fix for this issue that will be in 1.3.1.

Can you please test against the nightly build tomorrow and let me know if you have any issues? I will re-open if so.

Thanks,
Dan

[ThomasDalla]

I confirm it displays correctly with the nightly build 1.3.0-3134, thank you.

[danbucholtz]

@ThomasDalla, thanks for contributing and letting us know. We appreciate it.

Thanks,
Dan