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


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">
    <button class="button button-clear icon ion-android-close"
            ng-show="phone" ng-click="phone=''"></button>

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?

How to set header(fixed div on top) in ion-content before ion-refresher

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?


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.


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.


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


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.


Alright, no worries :smile:

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


I finally got the problem.
It is caused by the intro slide (almost the same with, except some words).

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


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