Subheader with input type="search" ng-model="query" is not been shown in Android


#1

Hello.

My problem is that I want to use a subheader as a query bar (see the image below) and it runs really fine on IOS but it does not even appear on Android.

Ionic Lab Image

Here’s my code:

 <div class="bar bar-subheader  item-input-inset ">
   <a class="item item-avatar" ng-click="modal.show()">
   <img src="{{foto}}">
 </a>
         <label class="item-input-wrapper">
           <i class="icon ion-ios-search placeholder-icon"></i>
           <input type="search" ng-model="query" placeholder="Buscar">
         </label>
 </div>

  <ion-content  class="has-subheader has-header">
...

I have had the same trouble since i started to make this app. And I have already tested it on a real Android device, but it does not work either.

Someone could tell me please what options do I have or what should I do to make this subheader look fine on Android.

Thanks.


#2

also using ng-model=“query” with the same class names and getting this exact same problem. Works really well on iOS / serve view but not on android. The sub-header space stays there but the search function will not display.


#3

Are other people not having this issue? Could someone give an example of how to write this?


#4

in app.js add this line : $ionicConfigProvider.tabs.position('bottom'); to put the tabs in bottom for android.
full code:

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

$ionicConfigProvider.tabs.position(‘bottom’);
// add the rest of the configuration

}


#5

Yes it worked.

Thanks so much.

Regards.