Monaca Onsen UI Discord Chat Github Repo

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…