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

    And the javascript part:

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

    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…


Log in to reply