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.

<ons-orientation> how to use it please?



  • Hi All,

    I am new to Onsen UI. I want to change individual page orientation like one page work only in portrait mode, one another for landscape mode. How can I do that?

    Thanks


  • Onsen UI

    @mmike The docs for ons.orientation object are here.

    It simply emits change events whenever the device orientation changes. A simple way to change the displayed content would be toggling a CSS class in the body. For example:

    ons.orientation.on('change', function(event) { 
      document.body.classList.toggle('landscape', !event.isPortrait);
    });
    

    Then, your pages can be like this:

    <ons-page>
      <ons-toolbar>...</ons-toolbar>
    
      <div class="content">
        <div class="potrait_content">...</div>
        <div class="landscape_content">...</div>
      </div>
    </ons-page>
    

    And apply CSS rules to toggle them:

    body.landscape  .portrait_content {
      display: none;
    }
    
    body:not(.landscape)  .landscape_content {
      display: none;
    }
    

    Hope it helps!



  • Thanks Fran!

    Is there a method to rotate the screen to 90 degrees(to change page orientation) using onsen UI?

    Once again… Thanks!


  • Onsen UI

    @mmike No, ons.orientation only detects changes, it does not make changes.