Ionic Search input in header bar

Question

I do not understand why the input text is slightly offset to bottom when rendered in IOS simulator and in Browser is positioned right.

The code is very simple:

<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 ng-model="search_text" type="text" placeholder="Search..." focus-me my-enter="search_model(search_text)" autofocus>
        </label>
    </div>
</ion-nav-title>

Here I attach two snapshots (in browser and in IOS simulator):

What's hapenning?

Answer 1

The header-bar shouldn't be inside a ion-nav-title. Actually if you use a div with class="bar header-bar" you could declare a title inside using class="title". For example:

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

Removing the ion-nav-title tag should fix the issue.