3. Tabbar above Toolbar in Android?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Tabbar above Toolbar in Android?

  • E

    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!

    0

  • 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;
}
    2