Ionic Search input in header bar

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?

2 Answers

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

Answers 2

Just change the ion-nav-title to ion-nav-bar

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati