Need help getting panel fade to work properly

[Rob Tanner]

In my application, under certain circumstances, I open up a DialogueBox
() in the middle of the screen. In order to focus attention on the
box, I gray out the surrounding screen using PopupPanel() that should
cover the entire screen. The panel is black with 60% opacity. This
works perfectly on Safari and, believe it or not, even with IE. Where
it fails is Firefox. In Firefox the gray translucent panel only
covers down to the bottom of the lowest panel visible in the browser.
Here's the code I'm using to set the properties of the popup:

glass = new PopupPanel();
DOM.setStyleAttribute(glass.getElement(), "width", "100%");
DOM.setStyleAttribute(glass.getElement(), "height", "100%");

DOM.setStyleAttribute(glass.getElement(), "backgroundColor",
"#000");
DOM.setStyleAttribute(glass.getElement(), "opacity", "0.60");
DOM.setStyleAttribute(glass.getElement(), "_moz_opacity", "0.60");
DOM.setStyleAttribute(glass.getElement(), "filter", " alpha
(opacity=60)");

(I am modeling a tutorial found at http://examples.roughian.com/#Tutorials~Panel_Fade)

I am running GWT 1.7.1 and the problem browser is Firefox 3.5.5.

Any ideas?

Thanks,
Rob

[Yozons Support on Gmail]

Not sure when it was released (I'm using 2.0RC2 now), but did you just try the DialogBog.setGlassEnabled(true) call?

[Rob Tanner]

I presume you mean DialogueBox and setGlassEnable() must be a 2.0RC2
feature.

[Yozons Support on Gmail]

Sorry for the typo, but it's DialogBox (and neither DialogBog or DialogueBox <smile>).  It is a method on PopupPanel and could very well be 2.0.  If you are getting started on a new project, I recommend going to 2.0RC2 now because you'll need to upgrade at some point anyway, and because it's an RC2, it's fairly stable for development work, and the ability to debug in FF (or IE if you prefer) directly is a huge win.

[Rob Tanner]

Gave up on 2.0 because of the "-style" bug (another thread) but did
come up with a workaround to accommodate Firefox.

Original code: DOM.setStyleAttribute(glass.getElement(), "height",
"100%");
Workaround: DOM.setStyleAttribute(glass.getElement(), "height", new
Integer(Window.getClientHeight()).toString());

And, of course, if someone resizes the window, I added the following
handler:

Window.addResizeHandler(new ResizeHandler() {
// this is a tweak so that glass works in Firefox
public void onResize(ResizeEvent event) {
DOM.setStyleAttribute(glass.getElement(), "height", new Integer
(Window.getClientHeight()).toString());
}
});

It's not perfect, but it's darn close.