Background Color behind the "processing" dialog

answered 2014-03-06 15:43:11 +0800

ansancle
327 ● 9

updated 2014-03-07 13:25:08 +0800

We finally figured out what was going on (thanks to Vincent!).

The settings he provides above for your style sheet are correct and will work - HOWEVER - if you are using stylesheets like I am and importing them into your pages via the <style> tag it won't work.I t's very important that you use the <?style src="yourstylesheet.css" ?> tag instead at the top of your zul file to include the sheet that has the css code

    .z-apply-mask,
.z-modal-mask {
    background: black;
    opacity: 1.0;
}

I was including the style sheet using <style src="mystyle.css"/> inside my window tags. This doesn't set the style until the window has already started processing, which is too late for the changes I was trying to make.

I ended up going with the following CSS to eliminate the processing dialog and it's window behind it (actually a div)

body 
{
    padding:0 0 0 0 !important;   
    background : #000000;
}    
.z-temp, .z-modal-mask
{
    display : none !important;
    visibility : hidden !important;
}

And here is the actual html generated by ZK that creates that processing dialog if you wan to look for it or see the html that creates it :

<div id="g4fX_" class="z-temp"><div id="zk_proc" class="z-loading"><div class="z-loading-indicator"><span class="z-loading-icon"></span>Processing...</div></div></div>

Here is the top of my zul files now :

<zk>
<?page title="Example Zul"?>
<?style src="/stylesheets/myStyleSheetToFixProcessingIssue.css"?>
<window>
....
</window>

Additionally, if you have a window type defined in lang-addon.xml like I do :

       <component>
    <extends>window</extends>
    <component-name>dhIpadBaseWindow</component-name>
    <property>
      <property-name>width</property-name>
      <property-value>1024px</property-value>
     </property>
    <property>
      <property-name>height</property-name>
      <property-value>768px</property-value>
     </property>  
    <property>
      <property-name>sclass</property-name>
      <property-value>dhIpadBaseWindowStyle</property-value>
    </property>                                
  </component>

I moved the definition of the sclass "dhIpadBaseWindowStyle" to the style sheet loaded via the <?style....?> tag, that sclass sets my background to black. This final step eliminated all white flashes on the desktop and ipad.

    .dhIpadBaseWindowStyle .z-window-content
{
    background: #000000 !important;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}