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.

Splitter and navigator

  • Re: Combining Splitter and Navigator with back button.


    I have a question about the splitter and the navigator. I normally include <ons-navigator> just under the <body> tag. This works fine… until I add a splitter. In the reference above, it is suggested to move the <ons-navigator> tag inside of <ons-splitter-content>. Can someone please explain to me why? I would have NEVER figured this out on my own had the above post been made.


  • Onsen UI

    @Michael-Redwine You can see all the “navigation” components (ons-navigator, ons-splitter, ons-tabbar) as some kind of frames that can change their content. As a content wrapper, they offer certain unique features: ons-navigator provides page stack and animations; ons-splitter provides a responsive side menu; etc. But they are just that, frames. If your frame A is the parent of frame B (i.e. frame B is part of the content of frame A), whenever you change frame A’s content you’ll be removing frame B and all its features.

    Therefore, if you have a splitter inside the first page of a navigator and you push a new page to the stack… the new page will be on top of the splitter and you won’t be able to see it. This means you only get a side menu for specific pages (the first one in this case). Otherwise, if you put the splitter as the parent of the navigator and push pages to the navigator’s stack, the splitter still remains in the same position and will be visible in every page of the stack. Components are not magically global, they only affect specific portions of the screen and as such you need to think about their order, position, etc.

    Hope this clarifies it a bit!

  • @Fran-Diox, Ok, I think I am slowly starting to get it, but just prepare to see my name pop up a lot for a while with lots of questions and scenarios… and I do appreciate your responses!

    To clarify what you said in the second paragraph above, when you talk about putting the splitter as the parent of the navigator… more specifically, are you talking about the navigator being a child of ons-splitter-content?


    And on this topic of navigator, this is how I imagine it, so pease tell me if this makes sense and if it sounds right: I have a box (like a cardboard box, called the nagivator). In this box, I toss in a sheet of paper (pushPage(page1)). I can see page one and everything that is written on it. Then I toss in a second sheet of paper (pushPage(page2)). I can see the contents of that piece of paper. I obviously can’t see the contents of page1 anymore because page2 is covering it… but page1 still exists… but covered by page2… until page2 is popped. When page2 is popped (remove from the navigator box), I can see page1 again.

    Assuming this is correct, I’ve a couple questions about this, because I’m having some trouble with some code of mine, and I think it deals with both navigators and templates. I have a pen here: This pen behaves exactly as the app does when ran as an app on Android.

    When page2 is popped, where does it go?

    What I expect: I open the app (or the web app, again, both behave the same), and it shows “No items yet” on the “home” page. I click the FAB to add a new item, type in “Carrot,” and I click the Add Item button. The screen then goes back to the home page and it would show one item, “carrot.” I then click the menu button in the upper left and tap “Home.” The screen would reload the “home” page, showing the list that, in this case, only contains the single list item, “carrot.” I should then be able to click on the FAB or the “Add” menu, be taken to the Add page, and add a new item.

    What happens: Everything is as expected until then end, when I open the menu and tap “Home.” In this case, instead of showing the single list item, “carrot,” it shows the three hard-coded filler items, “Filler-1,” “-2,” and “-3.” I can get to the add page again, but when I add a new item, just the filler list is visible, not the shopping list.

    (I think writing this stuff is therapeutic and it helps me see things…)

    <strikethrough>I am not sure what is happening. What I THINK is happening is that every time I tap the “Home” menu item, it creates a new page from the template and stacks it on top of my list, or, if I keep opening the menu and keep tapping Home, it keeps creating more and more “home” pages and throwing them on top of the last one. I think this because if I do this many times, then hit Android’s back button many times, I eventually see my shopping list… then when I hit back one more time, the app exits (as I would expect).</strikethrough>

    Assuming my interpretation of what I see if correct (edit: it is), I’m not sure how to proceed. How can I prevent from duplicating the home page? When I tap the Home menu item, how do I access the home page that has my shopping list in it? Or, possibly, am I asking the wrong questions?

    Edit: So I F12’d Chrome clicked the menu button many times, and it is as I deduced – multiple home pages. So… what do I do?


    PS… I don’t know who’s in charge of this website, but the autogrowing textarea needs to have a maximum height… like the height of the preview, or let the bottom frame grow along with the textarea. I had to write this in notepad then copy/paste because the textarea went below the screen and I couldn’t see what I was typing.

  • Can someone help me with my issue on nesting ons splitter inside ons-navigator?