0

Background Color behind the "processing" dialog

asked 2014-02-26 19:04:10 +0800

ansancle gravatar image ansancle
317 9

updated 2014-02-26 19:04:49 +0800

I would like to change the color that is visible behind the "processing" dialog (Clients.showBusy(String label)) when I am redirecting from one zul page to another.

My zul's all have a black background, but when you do redirect to another zul from server side processing in Java (subclasses of GenericForwardComposer) using Executions.sendRedirect, until the other page loads, I get a white/greyish background behind my processing dialog I put up. I want to make the background black while I am between pages.

My windows are all defined to have a black background via CSS, and I have the body tag overloaded in my style sheets to have a black background.

I am running both on a desktop browser and in an Ipad UIWebView. I tried on the Ipad to make the UIWebView background solid black to see if that would do it, but I end up with a grey background between pages so it's something in the HTML that is making it that color since I know my background behind the html (the UIWebView) is black.

Any help appreciated! Thanks! Andy

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted
1

answered 2014-03-03 02:38:31 +0800

vincentjian gravatar image vincentjian
2245 6

updated 2014-03-04 01:29:11 +0800

Hi, you can try modify the CSS style

.z-apply-mask,
.z-modal-mask {
    background: black;
    opacity: 1.0;
}
link publish delete flag offensive edit

Comments

I tried that, no luck, I also have tried : .z-window { background : #000000 !important; } without success.

ansancle ( 2014-03-03 12:26:32 +0800 )edit

Let me update - that did have some effect, I get "less" white before and after the processing, but behind the processing is still white/grey.

ansancle ( 2014-03-03 12:30:28 +0800 )edit

I even tried specifying a background image for the body that's all black, didn't work. body { background: url("./images/system/defaultbackground.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); padding: 0 !important; }

ansancle ( 2014-03-03 13:37:38 +0800 )edit

There is another style "opacity:0.6", just modify it to "opacity: 1.0". Update the answer

vincentjian ( 2014-03-04 01:27:50 +0800 )edit
0

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

ansancle gravatar image ansancle
317 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;
}
link publish delete flag offensive edit
0

answered 2016-08-29 07:50:01 +0800

Hundzukani gravatar image Hundzukani
1

Aaahh, I've been search all over for hiding zk default processing window when the broswer refresh. This works like a charm, awesome stuff. Thanks Guys

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2014-02-26 19:04:10 +0800

Seen: 74 times

Last updated: Aug 29 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More