Tabbar above Toolbar in Android?

etagrats

Hey folks,

Simple question, if I put the tabbar at position=“auto” here : https://onsen.io/tutorial/?framework=vanilla&category=Reference&module=tabbar … in Android the tabbar will go above the toolbar. I need a different title in Tab1 and Tab2 in the toolbar, so how can I do that properly (by that I mean the tabbar just below the toolbar)?

Thank you!

IliaSky

I don’t think that type of behaviour is currently officially supported. Since the tabbar is supposed to act as a container element having some part of the page going outside might cause some strange behaviour.

The current “normal way” of achieving what you want would be:

<ons-page>
 <ons-toolbar>
   <div id="tabbarTitle" class="center"></div>
 </ons-toolbar>
 <ons-tabbar>
   ...
 </ons-tabbar>
</ons-page>

and then changing tabbarTitle's content with javascript.

Alternatively the “css hack” way would be something like this (codepen):

.tab-bar--material {
  top: 51px;
}
.tab-bar--top__content {
  top: 0;
}
.tab-bar--material__content .navigation-bar--material ~ .page__content {
  top: 102px;
}

Tabbar above Toolbar in Android? browsing