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.

iOs Page with tabbar not loading

  • I created an app with a page with the “tabbar”-element. This page is just not loading and I can’t figure out why. I reduced the possible causes down to the tabbar. If I delete the tabbar, the page is loading (well there isn’t much more than the tabbar element).
    I also tested it on Android and everything is working as intended there.

    Here is my code:
    The page with the tabbar:

      <template id="home.html">
        <ons-page id="home-page">
            <div class="left"></div>
            <div class="center">Tabbar Test</div>
            <div class="right">
              <ons-toolbar-button onclick="">
                <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          <ons-tabbar position="top">
            <ons-tab page="kitchen.html" label="Kitchen"></ons-tab>
            <ons-tab page="occasion.html" label="Occasion"></ons-tab>

    And the two tab pages:

      <template id="kitchen.html">
        <ons-page id="kitchen-tab">
          <div>Here will be a list</div>
      <template id="occasion.html">
        <ons-page id="occasion-tab">
          <div>Here will be a list</div>

    Is there something wrong with the code? Or is this a known issue with a fix?

  • I still have this problem. If I push the page with the tabbar on an ios phone, it just doesn’t work. Do you need more info to isolate the problem?

  • Onsen UI

    @kk Is that home.html page the root of your all? If so, remove its <template> element wrapper. Does this example works?

  • @Fran-Diox Sorry, couldn’t respond the last two days…

    The app is actually way bigger, with a lot more sites.
    I don’t really have a root template I think.

    I use a splitter like that:

        <ons-splitter-side id="menu" side="left" width="220px" collapse>
              <ons-list-item onclick="fn.load('home.html')" tappable>
              <!-- More list items -->
        <ons-splitter-content id="content">
          <ons-navigator swipeable id="myNavigator" page="login.html"></ons-navigator>

    So my first page is the “login.html” which has a login-button of course which when clicked pushes the “home.html”.


      <template id="login.html">
        <ons-page id="login">
          <div class="page-wrapper">
            <ons-row class="header">
                <span class="tte-font">My App</span>
            <ons-row><ons-input id="email" modifier="underbar" placeholder="E-Mail" float></ons-input></ons-row>
            <ons-row><ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input></ons-row>
            <ons-row><ons-button id="login-button" modifier="large">Login</ons-button></ons-row>


    document.addEventListener('init', function(event) {
      var page =;
      if ( === 'login') {
        page.querySelector('#login-button').onclick = function() {
          // verify credentials and stuff then do:
          document.querySelector('#myNavigator').resetToPage('home.html'); // I use "resetToPage" so the user can't go back to the login page

    The example you posted is working. If I expand it with a splitter like mine and a login page etc. it’s also working.
    Since I don’t get en error message on my app, I’m a little at a loss where to start debugging. I just know, that my page works if I remove the tabbar, which is kind of odd.

    I also would love to post the whole app, but it’s actually really large already and not really refined yet.