Full width Search Bar inside ion-nav-bar?


#1

Hello there!

I’d like to know what’s the best way to accommodate a search bar in the middle of two icons inside of an ion-nav-bar

Here’s a screen-shot to show better what I mean:

And here’s the code (taken from one of the demo apps):

<ion-view>
  <ion-nav-buttons side="left">
    <button class="button icon ion-navicon"></button>
  </ion-nav-buttons>

  <!-- Here's where I try to create my search bar -->
  <ion-nav-buttons side="primary">
    <label class="item item-input" style="height:36px">
      <i class="icon ion-search placeholder-icon"></i>
      <input type="text" placeholder="Search" />
    </label>
  </ion-nav-buttons>

  <ion-nav-buttons side="right">
    <button class="button icon ion-navicon"></button>
  </ion-nav-buttons>  

  <div class="bar bar-subheader">
    <h2 class="title">Sub Header</h2>
  </div>

  <ion-content class="has-subheader">
    <div class="list card">
      <div class="item item-divider">Recent Updates</div>
      <div class="item item-body">
        <div>
          There is a fire in <b>sector 3</b>
        </div>
      </div>
    </div>
    <div class="list card">
      <div class="item item-divider">Health</div>
      <div class="item item-body">
        <div>
          You ate an apple today!
        </div>
      </div>
    </div>
    <div class="list card">
      <div class="item item-divider">Upcoming</div>
      <div class="item item-body">
        <div>
          You have <b>29</b> meetings on your calendar tomorrow.
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

So far, I still haven’t discovered the Ionic way of doing this, please help me. Thanks in advance!
Regards,
-Jose


#2

#3
<ion-view style="z-index: 100;"> - my solution with simple search example, think it`s better then hide-nav-bar. 

    <ion-view style="z-index: 100;">
  <ion-header-bar align-title="left" class="bar item-input-inset bar-positive">
    <label class="item-input-wrapper">
      <i class="icon ion-ios7-search placeholder-icon"></i>
      <input type="search" placeholder="Search" ng-model="searchText" ng-change="" ng-model-options="{debounce: 350}">
    </label>
    <button class="button button-clear" ng-click="goBack();">
      Cancel
    </button>
  </ion-header-bar>
  <ion-content class="has-header">
    <ion-list>
      <ion-item collection-repeat="item in items | filter:searchText" ng-click="onSelect(item); $scope.searchResult = item">
        {{item.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

#4

Thanks man! this is awesome, sorry for the late reply.


#5

inspiration from @ronycohen
First, add a special style in your css file.

/*Make the searchbar width full.*/
.search-bar{
    left: 55px;
    width: calc(100% - 100px);
    position: fixed;
}

Then keeping as close to the demo as possible, add search-bar style to the "< div class=“bar bar-header item-input-inset >”:

<ion-nav-buttons side="primary">
        <div class="bar bar-header item-input-inset search-bar" ng-if="search.vis">
            <label class="item-input-wrapper">
                <i class="icon placeholder-icon ion-ios-search"></i>
                <input type="search" placeholder="" ng-model="search.val" my-focus-trigger="search.focus">
                <button class="button-clear icon ion-close" ng-show="search.val" on-tap="search.val=''"></button>
                <i class="icon placeholder-icon ion-ios-close-outline"  ng-show="!search.val" on-tap="search.vis=!search.vis"></i>
            </label>
        </div>
    </ion-nav-buttons>

#6

OR if you don’t need it in the nav bar 100% of the time and would like it to animate over the nav-bar then check out ionic-filter-bar :wink: