ionic-frameworkionic-view

Fixed search bar on tab template


I'm using the tabs template of ionic. I need to be a fixed search bar, but I don't find how to insert this bar down the tabs bar.

My app is like:

screen
(source: esfriki.com)

The problem is, I put the searchbar into the tab content, and this works, but, the bar is not fixed, when I do scrolling the list, the searchbar is scrolled too.

I need to have the tab nav-bar, and just down, before the lists (catalogs), the search bar (fixed).

Someone knows how I can do this?

tabs.html (tabs view): https://paste.kde.org/pbqwtl473

tab-bynames.html (tab content): https://paste.kde.org/pdxhlcviu

Sorry my poor enlglish.


Solution

  • Put search bar above <ion-content>, and instead of bar-header class, use bar-subheader class for search bar. Plus add class has-subheader to <ion-content>. Your code will be

    <ion-view view-title="Buscar por nombres">
        <div class="bar bar-subheader bar-dark item-input-inset" no-tap-scroll="true">
              <ion-search placeholder="Buscar nombre" min-length="1" model="search"></ion-search>
        </div>
        <ion-content has-header="true" has-tabs="true" class="">
        //content part
        </ion-content>
    </ion-view>