Nav bar buttons with a text input

ionic-v1
1

I recently added a search bar into the header of my application, and it forces my nav bar buttons to move over to the right hand side rather than the left. Header part of the template:

<ion-nav-bar class="bar-positive item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios7-search placeholder-icon"></i>
      <input type="text" placeholder="Search" ng-model="search.filter">
  </label>
 </ion-nav-bar>
 <ion-nav-buttons side="left">
    <button side="left" menu-toggle="left" class="button button-icon icon ion-navicon"></button>
 </ion-nav-buttons>

I also tried just moving the button into the ion-nav-bar, which worked to get it onto the left side of the page, but its not in the same position on the left as my other pages that use the menu button. Its just, off, slight to the right compared to the other pages. Its very obvious as your navigating around that the button moves over a few pixels.

What can I do to get the alignment right? I want it to basically look exactly like the example side menu project, but with an input instead of a title.

2

I see what you mean by off a few pixels. I played around with it and settled at this being the best solution.

 <ion-nav-bar class="bar-positive item-input-inset">
      <button menu-toggle="left" class="button button-light button-clear icon ion-navicon"></button>  
    <label class="item-input-wrapper">
    <i class="icon ion-ios7-search placeholder-icon"></i>
      <input type="text" placeholder="Search" ng-model="search.filter">
  </label>              
                 </ion-nav-bar>
1 Like
3

This doesn’t seem to work with a recent version of Ionic.
Can you confirm?

4

I figured it out. For instant:
The HTML:

<ion-view>
  <ion-header-bar class="bar-has-input item-input-inset">
    <label class="item-input-wrapper no-bg">
      <i class="icon ion-ios-search placeholder-icon text-2x"></i>
      <input type="search" placeholder="Search" ng-model="query" ng-init="query=''">
    </label>
.....

Then the CSS should be

.bar-has-input
  .nav-bar-block
    display: none