Would someone please point me to the right direction to fix this issue?
I was able to put an input in the header and it was rendered nicely in the browser. But when I run it with the ios simulator, the input is shifted down.
<ion-view>
<ion-nav-title>
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-focus="focus()" ng-blur="blur()">
</label>
</div>
</ion-nav-title>
<ion-content>...</ion-content>
</ion-view>
In browser,
In iOS simulator,
I have been searching for almost two days about a possible workaround for this issue. I haven’t been able find any. I guess not many are using search?
On a device/simulator Ionic adds padding for the device status bar. You need to make sure you are structuring your headers correctly.
Your search box needs to adjust it’s height for the 44px margin that is applied to the top. More info here https://github.com/delta98/ionic-platform-body-classes
You can examine the classes in Safari web inspector.
I ended up removing bar-header css class and the input element fits nicely when running in iOS simulator.
1 Like
@samfung thanks man, you tip saved me here.
I was having the same problem with a button-bar
Removing the .bar-header class solved my problem.
