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

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.

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.

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

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

}

1 Like

Yes it worked.

Thanks so much.

Regards.

image

1 Like