Monaca Onsen UI Discord Chat Github Repo

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!