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.

Toolbar display issue

  • I have a page in which there are 2 tab bar like below:But when i push page ons-toolbar size go from top then bottom. Suggest the solution for this.

    <ons-page style="background-color:white" ng-controller="AlarmCtrl">
        <ons-toolbar class="toolbar_clr">
            <div class="left">
                <div class="left" style="line-height: 44px">
                    <ons-icon icon="ion-android-arrow-back" ng-click="pop_alarm();" size="30px" style="color:white;padding-left:10px;padding-right:10px;margin-top:7px"></ons-icon>
            <div class="right" ng-show="showAlarmDel">
                <ons-toolbar-button style="margin-left:-20px" ng-click="deleteall_passalarm()">
                    <ons-icon icon="ion-android-delete" size="30px" style="color:white;"></ons-icon>
            <div class="center">
                <span style="color:white">{{currentLocale.almSet}}</span>
        <ons-tabbar position="top" var="alarm_tabbar">
            <ons-tab  page="alarmset.html" active="true">
            <ons-tab page="alarmhistory.html" ng-click="alarm_data()">

    My toolbar css is this:

    .toolbar_clr {
        background-color: #125073;
        /* padding-top: 10px; */
        min-height: 50px;

  • Onsen UI

    @Shubham-Kaushik The only thing I can add is that, if you modify the toolbar’s height, you also need to push down the page content:

    .toolbar {
      min-height: 50px;
    .page__content {
      top: 50px;

    However, I don’t understand what’s the issue that you mention with the toolbar. Please make a simple demo and post it here or file an issue on Github. You can quickly make your demo in (choose an AngularJS template to start).

  • 1_1501491224290_sreenshot1.png 0_1501491224289_screenshot11.png

    I have send you 2 screenshots. Now When I push page this screenshot page 1 opens with this page and then toolbar height set like in screenshot 2 which i want.

    Code i have already shared with you.

  • Onsen UI

    @Shubham-Kaushik I cannot see any way to “push page” in the code you shared. You are using custom styles so this is likely not an issue in the library. If you want any help on how to do something custom please provide a minimum demo of your issue that we can easily debug.