Monaca Onsen UI Discord Chat Github Repo

Hide Onsen Toolbar



  • I have ran into a somewhat interesting issue, I am sure I am just passing this incorrectly, but I have ran into an issue. I have a small app that uses Onsen Navigator. It consists on 3 pages, index.html, locate.html, and error.html. I am attempting to hide the toolbar on locate.html if the user has an iPhoneX. I had it working as long as the index.html DOES NOT have a Onset Toolbar itself. When I would push the locate.html, it would determine if the device was an iPhoneX and successfully hide the toolbar without issue. However, if the index.html has a Onset Toolbar, when I push the locate.html, the toolbar will no longer hide itself. It defiantly has something to do with the fact that there is now a toolbar in the index.html, if I remove that toolbar (which I actually need for the simple reason of having a toolbar-button), the hiding of the toolbar on locate.html again works as it should. I am baffled as to how to correct this issue. If anyone has any suggestions, I would appreciate it. Thanks in advance.



  • Hi,

    This is a quite difficult question, I modify the onsenui example ‘Stack Navigation’ as follows.

    <ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>
    
    <template id="page1.html">
      <ons-page id="page1">
        <ons-toolbar>
          <div class="center">Page 1</div>
        </ons-toolbar>
        <p>This is the first page.</p>
        <ons-button id="push-button">Push page</ons-button>
      </ons-page>
    </template>
    
    <template id="page2.html">
      <ons-page id="page2">
        <ons-toolbar modifier="transparent">
          <div class="left"><ons-back-button>Page 1</ons-back-button></div>
          <div class="center"></div>
        </ons-toolbar>
    
        <p>This is the second page.</p>
        <ons-button onclick="document.querySelector('#myNavigator').popPage()">Pop Page</ons-button>
      </ons-page>
    </template>
    
    document.addEventListener('init', function(event) {
      var page = event.target;
    
      if (page.id === 'page1') {
        document.querySelector('ons-toolbar').show();
        page.querySelector('#push-button').onclick = function() {
          document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
        };
      } else if (page.id === 'page2') {
        if (true) {
          page.querySelector('.toolbar').hide();     
        } else {
          page.querySelector('ons-toolbar').setAttribute('modifier', '')
        }
      }
    });
    

    You can set the condition from true to false, you will find the page 2 toolbar will display and not display accordingly.

    if everything is fine, you now change if(true) to if (ons.platform.isIPhoneX()) as follows:

    if (ons.platform.isIPhoneX()) { 
      page.querySelector('.toolbar').hide();     
    } else {
      page.querySelector('ons-toolbar').setAttribute('modifier', '')
    }
    

    Best Regards
    Gobi



  • Hi

    document.querySelector(‘ons-toolbar’).show() is not necessary.

    document.addEventListener('init', function(event) {
      var page = event.target;
    
      if (page.id === 'page1') {
        page.querySelector('#push-button').onclick = function() {
          document.querySelector('#myNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
        };
      } else if (page.id === 'page2') {
        if (true) {
          page.querySelector('.toolbar').hide();     
        } else {
          page.querySelector('ons-toolbar').setAttribute('modifier', '')
        }
      }
    });
    

    Best Regards
    Gobi