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 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>
          <div id="cmbcontent">


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

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

    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:

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