Close Icon In Search Header Missing iOS 6

ionic-v1
1

I’m using a search header to filter out a list. In iOS 7, I’ve got an “X” icon in the right of the search field to cancel the search. It works great.

Unfortunately, it does not show up in iOS 6. Anyone have suggestions for fixing this?

<view title="navTitle" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">

  <div class="bar bar-subheader item-input-inset">
    <label class="item-input-wrapper">
      <i class="icon ion-ios7-search placeholder-icon"></i>
      <input type="search" placeholder="Search" ng-model="mc.filterName" autocorrect="off" focus-on="friendSearch">
      <i class="clear-search icon ion-ios7-close-empty" style="font-size: 18px" ng-click="emptySearch()">
      </i>
    </label>
  </div>

  <content has-header="true" has-subheader="true" padding="true">

    <div summary-friend ng-repeat="friend in mc.summaryFriends | filter: filterNames" ng-click="goToMessages(friend.membersId)"></div>

  </content>

</view>


2

Hey @Calendee, looks like an issue we need to go in and fix for iOS 6. Issue made: https://github.com/driftyco/ionic/issues/506