PopupPanel.center() not working in Firefox 3.5.5

[David T]

Hi All,

I'm trying to use the provided PopupPanel.center() method to center a
popup panel on the screen. This works fine on Opera and Safari
centering the popup relative to the browser window. In Firefox though
it centers the popup relative to the entire page.

I've tried to implement my own center method as follows:

private void center() {
popup.setPopupPositionAndShow(new PositionCallback() {

public void setPosition(int offsetWidth, int offsetHeight)
{
int[] winSize = windowSize();
int left = (winSize[0] - offsetWidth) >> 1;
int top = (winSize[1] - offsetHeight) >> 1;
popup.setPopupPosition(Window.getScrollLeft() + left,
Window.getScrollTop() + top);
}

});
}

public final native int[] windowSize() /*-{
var myWidth = 0, myHeight = 0;
if (typeof(window.innerWidth) == 'number') {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if (document.documentElement &&
(document.documentElement.clientWidth ||
document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth ||
document.body.clientHeight)) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return [myWidth, myHeight];
}-*/;

But this doesn't work as the windowSize() method returns 0 for reasons
I don't know.

[David T]

[Dazza]

Why aren't you using GWT provided Window.getClientWidth() and
Window.getClientHeight()?

[David T]

They have the same problem as using PopupPanel.center(), for firefox
they return the web page dimensions instead of the browser window
dimensions. I implemented my own method to try to fix this.

[Thomas Broyer]

You use 'window' and 'document', which refer to the hidden iframe's
window and document your GWT code is loaded in (your
<permutation>.cache.html). You should always use $wnd and $doc in JSNI
code.

(and I agree PopupPanel.center() should use window.innerHeight/Width
where possible; at least when the document is smaller than the window;
have you filed a bug?)

[David T]

Great! Worked perfectly thank you.

Yeah I will look at filing a bug report.

[Thomas Broyer]

On Nov 30, 11:37 am, Thomas Broyer <t.bro...@gmail.com> wrote:
>
> (and I agree PopupPanel.center() should use window.innerHeight/Width
> where possible; at least when the document is smaller than the window;
> have you filed a bug?)

I just changed some popups (DialogBox) from setPosition+show to center
() and they display correctly in FF3.5, even when the document is
smaller than the window.
The page is in "standards mode", in case it changes something (which I
believe it could). And I'm using GWT 2.0 RC2 (I'm setting
setGlassEnabled(true) and the glass correctly overlays everything: the
whole viewport when the document is small than the window, or the
whole document when there's a scrollbar)

[David T]

Yeah I'm not exactly sure what is causing it, doesn't seem to be that
PopupPanel.center() is broken outright. I tried playing around with
the code to see if I pin point the bug but wasn't able to. I'm using
GWT 1.7 though.

For those interested though here is the full code for a work around:

private void center() {
popup.setPopupPositionAndShow(new PositionCallback() {

@Override
public void setPosition(int offsetWidth, int offsetHeight) a {

int[] winSize = windowSize();
int left = (winSize[0] - offsetWidth) >> 1;
int top = (winSize[1] - offsetHeight) >> 1;
popup.setPopupPosition(Window.getScrollLeft() + left,
Window.getScrollTop() + top);
}
});
}

private final native int[] windowSize() /*-{

var myWidth = 0, myHeight = 0;

if (typeof($wnd.innerWidth) == 'number') {
//Non-IE
myWidth = $wnd.innerWidth;
myHeight = $wnd.innerHeight;
} else if ($doc.documentElement &&
($doc.documentElement.clientWidth ||
$doc.documentElement.clientHeight)) {

//IE 6+ in 'standards compliant mode'

myWidth = $doc.documentElement.clientWidth;
myHeight = $doc.documentElement.clientHeight;
} else if ($doc.body && ($doc.body.clientWidth ||
$doc.body.clientHeight)) {
//IE 4 compatible
myWidth = $doc.body.clientWidth;
myHeight = $doc.body.clientHeight;
}
return [myWidth, myHeight];
}-*/;