4

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.

Community
  • 1
  • 1
Exos
  • 3,958
  • 2
  • 22
  • 30

1 Answers1

3

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>
Mudasser Ajaz
  • 6,197
  • 1
  • 26
  • 29
  • Now I have this: https://paste.kde.org/pscyzw244 and the search bar are disappeared. – Exos Sep 01 '15 at 00:52
  • Well, the search bar disappear because it's under the tabs bar. A dirty solution was set the top of search-bar on 93px (the top of content) and the content to 137px. – Exos Sep 01 '15 at 04:59
  • 1
    Hey @Exos what you realy need is this library, https://github.com/aliok/ion-affix – Mudasser Ajaz Sep 01 '15 at 05:08