How can I do avoid this behavior every time that I type something on the input?

#1

how can I do to avoid this behavior ?

as you can see everytime that I type something, at the right appears a cancel button (x) and the height of the input increments, that’s what I want to avoid.

    <ion-header-bar class="bar-positive bar-subheader">
      <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text"
               placeholder="Sports finder...">
        <button class="button button-clear"
                ng-click="query = ''">
          <div ng-show="query">
            <i class="ion-close-circled assertive animated flipInY"></i>
          </div>
        </button>
      </label>
    </ion-header-bar>

and there is the same exact code I am using

#2

Remove the button

<button class="button button-clear"
                ng-click="query = ''">
          <div ng-show="query">
            <i class="ion-close-circled assertive animated flipInY"></i>
          </div>
        </button>
1 Like
#3

But if I remove the button and do this instead:

      <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text"
               placeholder="Sports finder..."
               ng-model="query">
          <div ng-show="query" ng-click="query = ''">
            <i class="ion-close-circled assertive animated flipInY"></i>
          </div>
      </label>

it works now but I am unable to click it in order to clean the input.

#4

I did it now, just I had to remove the label and put div instead