How to put an input and a reset botton in a header bar

ionic-v1
1

This is what I tried:

<ion-header-bar class="bar bar-subheader bar-positive item-input-inset">
    <label class="item-input-wrapper">
      <i class="icon ion-iphone placeholder-icon"></i>
      <input type="tel" placeholder="input your number" ng-model="phone">
    </label>
    <button class="button button-clear icon ion-android-close"
            ng-show="phone" ng-click="phone=''"></button>
  </ion-header-bar>

It works as expected on desktop browser. The reset button shows next to the input when the input is not empty.

However, if I run the app on my device. I get the message from the console:
D/CordovaLog( 3469): file:///android_asset/www/bower_components/ionic/js/ionic.js: Line 6904 : Uncaught TypeError: Object # has no method ‘getBoundClientRect’

I guess I did something wrong or it may be a bug. So how to do it right?

2

Hm, trying this right now so I’ll post the results when I’m done testing. But what version of ionic are you using? Also what version of android are you testing on?

3

So I tested with a 4.4 device and beta 8 and couldn’t get an error message. Use the same code you provided too. Not too sure what could be causing this.

4

You have to focus on the input to get the error message.

I am using ionic beta 8 (and now 9) on android 4.0.4.

5

Alright, I’ll try on 4.0. One moment please

6

I tried it with the ionic starter project.
And there is no error message.
So it is my fault.
I am trying to locate the problem.
Sorry~

7

Alright, no worries :smile:

Maybe you can post a demo of your project and we can find it?

8

Thanks!
I finally got the problem.
It is caused by the intro slide (almost the same with http://ionicframework.com/tutorials/intro-tutorial/, except some words).

Try it on the device. You just rotate your device to landscape/portrait to get the error message.

9

Hi, mhartington
Can you reproduce the error about ion-slide-box according to my last post?