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.

How to make CSS take effect on a page template before it's pushed?



  • I have a page template with toolbar that should have a background color set before it visually appears on screen, but it’s currently appearing with a default white background then very quickly changing to the correct color. Is it possible to get it to be the correct color before it appears so I don’t see the white flash first?

    Template:

    <template id="devpage">
       <ons-page id="devpage-inner">
          <ons-toolbar id="devtoolbar">
    	<div class="left" id="devbackbtndiv" style="color: #ffffff"><ons-back-button id="backbtndev">Back</ons-back-button></div>
    	<div class="center" id="cmbtitle" style="color: #ffffff"></div>
          </ons-toolbar>
    
          <div id="cmbcontent">
          </div>
       </ons-page>
    </template>
    

    Code:

    mainnav.pushPage('devpage').then(function() {
       // Change title bar colour to dynamically calculated color:
       $('#devtoolbar').css('background', #dynamic color calculation here);
       etc....
    

    I tried putting the color change before the above mainnav.pushPage() statement, but that didn’t work because it’s a template.

    mainnav is in a splitter:

    <ons-splitter>
       <ons-splitter-side id="sidemenu" side="left" width="220px" collapse swipeable>
          Some menu items here
       </ons-splitter-side>
       <ons-splitter-content id="menucontent">
          <ons-navigator id="mainnav" page="initialpage"></ons-navigator>
       </ons-splitter-content>
    </ons-splitter>
    

    Thanks for any suggestions


  • administrators

    You can try listening for the page’s init event.

    See here for more details of a case where a user had the same flickering problem:
    https://community.onsen.io/topic/3568/page-beforeshow-event



  • @emccorson Yes that fixed it, perfect thanks very much!