Dane wejściowe wyszukiwania jonowego w pasku nagłówka

Question

Nie rozumiem, dlaczego tekst wejściowy jest nieco przesunięty do dołu, gdy jest renderowany w symulatorze IOS, a w przeglądarce znajduje się w prawo.

Kod jest bardzo prosty:

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

Tutaj załączam dwa zrzuty (w przeglądarce oraz w symulatorze iOS):

Co hapenning?

Answer 1

Pasek nagłówka nie powinien znajdować się wewnątrz tytułu jon-nav. Właściwie jeśli użyjesz div z class = "bar header-bar" możesz zadeklarować tytuł używając class = "title". Na przykład:

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

Usunięcie znacznika title-jon-nav powinno rozwiązać problem.

Answer 2

Po prostu zmień tytuł nawigacji na jono na nav-bar