Make search bar stick to the header/tabs ionic

Question

I implement pull to refresh on my search on ionic. When I pull down to refresh the result, the search bar also got pulled down. How to make the search bar element to stick to header or tab, so only search result got pulled down.

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>
  <body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Pull To Refresh</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list list-inset">
      <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Search">
      </label>
    </div>
      <ion-refresher on-refresh="doRefresh()">

      </ion-refresher>
      <ion-list>
        <ion-item ng-repeat="item in items">{{item}}</ion-item>
      </ion-list>
    </ion-content>

  </body>
</html>

Here is the https://codepen.io/cafe3/pen/GWZXgx

If i put the search bar outside <ion-content>, It will be block by tabs if tabs positioned at top (I think on Android, the tabs will be at top). I want the search bar to stick at top or at tabs if the tabs are positioned at top so it doesnt get pulled down by ion-refresher Any way to solve this?

it put the search bar at header. I want the search bar below tabs if the tabs are at top and header — Tom Kur

Korbin Korbin · Accepted Answer · 2017-04-12T13:22:17

You should use header and sub-header, check this codepen I made, I just didn't play with css that much

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $timeout) {
  $scope.items = ['Item 1', 'Item 2', 'Item 3'];
  
  $scope.doRefresh = function() {
    
    console.log('Refreshing!');
    $timeout( function() {
      //simulate async response
      $scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4);

      //Stop the ion-refresher from spinning
      $scope.$broadcast('scroll.refreshComplete');
    
    }, 1000);
      
  };
  
});

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    
  </head>
  <body ng-controller="MyCtrl">
    <ion-nav-bar class="bar-stable" align-title="center">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
<ion-tabs class="tabs-icon-only tabs-color-active-assertive">

  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon-off="icon ion-home" icon-on="icon ion-home" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <!-- Search Tab -->
  <ion-tab title="Chats" icon-off="ion-search" icon-on="ion-search" href="#/tab/search">
    <ion-nav-view name="tab-search"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Account" icon-off="ion-person" icon-on="ion-person" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>
</ion-tabs>
    
    <div class="bar bar-header bar-positive">
      <h1 class="title">Pull To Refresh</h1>
    </div>
     <div class="bar bar-subheader">
      <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Search">
      </label>
    </div>
    <ion-content class="has-subheader">

      <ion-refresher on-refresh="doRefresh()">
                     
      </ion-refresher>
      <ion-list>
        <ion-item ng-repeat="item in items">{{item}}</ion-item>
      </ion-list>
    </ion-content>
    
  </body>
</html>

http://codepen.io/k185/pen/xdxVPa?editors=1010

Make search bar stick to the header/tabs ionic

1 Answers