Ионный вход поиска в панели заголовка

Я не понимаю, почему входной текст слегка смещен снизу при визуализации в симуляторе IOS, а в браузере - вправо.

Код очень прост:

<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>

Здесь я прикрепляю два моментальных снимка (в браузере и в симуляторе IOS):

Что происходит?

Ответ 1

Строка заголовка не должна находиться внутри заголовка ion-nav. На самом деле, если вы используете div с class= "bar bar-bar", вы можете объявить заголовок внутри, используя class= "title". Например:

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

Удаление тега ion-nav-title должно устранить проблему.

Ответ 2

Просто измените название ion-nav-title на ion-nav-bar