How do I center a DialogBox in the currently viewable client area?

9 views
Skip to first unread message

dc

unread,
Jun 5, 2006, 4:50:09 PM6/5/06
to Google Web Toolkit
I have been looking into this for a bit and can't find the attributes I
need to make this robust (probably just missing something basic).

I would like to be able to place the dialog box in the center of the
currently viewable client area, but can't find a way to determine where
the top of the viewport is.

The documentation for Window and PopupPanel state:

PopupPanel: setPopupPosition(int, int) Sets the popup's position
relative to the browser's client area.

Window: getClientHeight() Gets the height of the browser window's
client area.

getClientHeight() always returns the viewport height which seems to
imply that setPopupPosition should position the panel relative to the
viewport as both are called the 'client area', however setPopupPosition
always starts at zero.

any ideas on how to accomplish this?

Travis

unread,
Jun 5, 2006, 5:04:43 PM6/5/06
to Google Web Toolkit
I have done something like this.

myBox.setPopupPosition((Window.clientWidth() -
myBox.getOffsetWidth())/2,
(Window.clientHeight() -
myBox.getOffsetHeight())/2);

If you do not specify width and height for your Box then you must do
this after calling show(). This makes the box jump on the screen.

Does anybody have a better solution?

dc

unread,
Jun 5, 2006, 5:43:17 PM6/5/06
to Google Web Toolkit
Thanks Travis - I've also tried that approach, but it breaks down when
the window is sized smaller that the widgets on the screen (ie:
scrollbars are being displayed) and the window is scrolled down towards
the bottome of the widget. setPopupPosition (at least on the version
of GWT I am using 1.0.20) starts at 0,0 rather than relative to the
current client areas as the documentation suggests...

Joel Webber

unread,
Jun 20, 2006, 2:01:28 PM6/20/06
to Google-We...@googlegroups.com
There's currently no built-in way to get the document body's scroll[Left | Top] (something we'll look into adding), but you can use JSNI to work around that like so:

    public void show() {
      super.show();
      int left = (Window.getClientWidth() - getOffsetWidth()) / 2 + getBodyScrollLeft();
      int top = (Window.getClientHeight() - getOffsetHeight()) / 2 + getBodyScrollTop();
      setPopupPosition(left, top);
    }

    private native int getBodyScrollLeft() /*-{
      return $doc.body.scrollLeft;
    }-*/;

    private native int getBodyScrollTop() /*-{
      return $doc.body.scrollTop;
    }-*/;

This code in a DialogBox subclass will cause it to pop up in the center of the browser window, even if it's scrolled.

joel.
Reply all
Reply to author
Forward
0 new messages