-
1. Re: Help changing modalPanel background color.
The picture you posted looks like a transparency problem of the throbber image you use.
I know of a problem of IE with transparent PNGs - just google "IE png fix".
If you replace this image with text - does the modal panel look like you expect it to?
If you still don't get it working - please post the code your modal panel too. -
2. Re: Help changing modalPanel background color.
"daniel.soneira" wrote:
If you replace this image with text - does the modal panel look like you expect it to?
Yeah I tried words the issue is still present. Here is some code to show my problem:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Test</title> <STYLE TYPE="text/css"> .rich-modalpanel {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} .rich-mpnl-mask-div {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} .rich-mpnl-resizer {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} .rich-mpnl_panel {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} .rich-mpnl-shadow {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} .rich-mp-content {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} .rich-mpnl-body {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} </STYLE> </head> <body> <h:form> <a4j:commandButton reRender="spinner" onclick="Richfaces.showModalPanel('spinner')" value="Run" action="TestBacking.testAction" /> <rich:modalPanel id="spinner" autosized="true"> <img src="/images/spinner.gif" /> </rich:modalPanel> </h:form> </body> </html>
If I change the CSS settings to this it displays correctly in IE, but incorrectly in firefox:<STYLE TYPE="text/css"> .rich-modalpanel {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} .rich-mpnl-mask-div {background-color: #e1e1e1; border-color: #f0f0f0; border-width: 0px} .rich-mpnl-resizer {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} .rich-mpnl_panel {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} .rich-mpnl-shadow {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} .rich-mp-content {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} .rich-mpnl-body {background-color: #f0f0f0; border-color: #f0f0f0; border-width: 0px} </STYLE>
Notice the background color for: rich-mpnl-mask-div -
3. Re: Help changing modalPanel background color.
This one works in Firefox (but not in IE)
<style type="text/css"> .rich-mpnl-mask-div {background-color:hotpink; border-color: #f0f0f0; border-width: 0px} .rich-mp-content{background-color:inherit;border:none} .rich-mpnl-shadow{background-color:inherit;border:none} </style>
If you change the background-color of rich-mpnl-mask-div to "inherit" as well the modal panel itself will not be distinguishable from the background - it will just show the text / image.
Seeing your code I guess you want to show some kind of "in progress" status (with a4j:status?).
I myself had quite some difficulties when using a similar approach to showing a "loading" image in a modal panel. When I REALLY wanted to show a modal panel it interfered in some circumstances (because it FIRST tried to show the STATUS panel before showing the REAL modal panel). I then changed to a static symbol that is ALWAYS visible in the page - think of the firefox loading symbol in the right upper corner. It is faster, and works like a charm in every situation. In case of an ajax request this static symbol is exchanged with the spinning one.
Sure, your problem might have something to do with the modal panel but it is a CSS specific [IE/Firefox] question I'm afraid the RichFaces team (which I am not part of) is not able to help you with. -
4. Re: Help changing modalPanel background color.
Thank you for the help. Inherit worked well in Firefox, but not IE. I came up with a hack to check the browser type and dynamically change rich-mpnl-mask-div background color. I'm sure there is a correct way to do this, I'm just not doing it...