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.

Navigator inside splitter iOS problem

  • I have the occuring topic combining the splitter and the navigator.
    It’s basically working and I tested it on Android and iPhone with iOS 10.3.3, but it isn’t working on an iPhone with iOS 11.0.0.
    The splitter is opening but I just can’t click any “links” in the navigation to open the new pages.

    Here is my code:

    The splitter with the navigator:

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

    And the javascript part:

    window.fn = {}; = function() {
      var menu = document.getElementById('menu');;
    window.fn.load = function(page, data) {
      var content = document.getElementById('myNavigator');
      var menu = document.getElementById('menu');
      content.pushPage(page, data)
    window.fn.pop = function() {
      var content = document.getElementById('myNavigator');

    I tried multiple solutions, but nothing is working on the new iPhone.

    Thanks in advance.

  • Onsen UI

    @kk Hi! That’s weird, the code seems fine. Can you try replacing the content of ons-splitter-side with normal div tags and see if the onclick is triggered? Didn’t have the chance to test iOS 11 myself yet…