How to center a popup/dialog window in GWT?

Question

I have a list of records, each record has a button that opens setting window. Also I have preferences with a lot of logical parts and each part has some records with a button.

So, when I click on a button, dialog window appears, but if this button is somewhere in the bottom the page (let it be 300 records with button), my dialog window appears on the top. As a result I have to scroll up in order to find this window (sometimes it appears behind browser borders).

Or just imagine that you configure something and scroll page down filling each option, at the end you saves your configuration but some fields were filled incorrectly and warning popup window appears... somewhere on page, but not near your pointer or even not in the middle of your current page.

All my dialog windows are inherited from DialogBox, so I use super.show() and super.center(), but it doesn't work as I want it to.

Small info addition: some dialog windows receive data from server and when all the data is received the rest of the window is displayed. I suspect this can cause sometimes window to appear in a wrong place.

Answer 1

You are right that editing the content of the dialog box after it is centered will cause it to appear uncentered. To solve this issue I called center after the content is loaded. You can display a loading spinner or something in the meantime.

In some cases, the size of the widget you added cannot be calculated immediately. Unfortunately the best way I found to deal with this was to add the widget and then run

Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
    public void execute() {
        dialogBox.center();
    }
});  

(unchecked code)

This ended up being so common that I added a method called scheduleCenter to my DialogBox class.

You can also call center more than once - each time will re-run the centering calculations. This causes a little bit of jerking. If you don't want any jerking around, then you'll have to set the size of the interior widget explicitly:

DialogBox dialogBox = new DialogBox();
dialogBox.add(myWidgetWhichWillLoadDataLater);
myWidgetWhichWillLoadDataLater.addStyleName(styleNameWhichSetsSizeExplicitly)
dialogBox.center();

You could also call myWidgetWhichWillLoadDataLater.setHeight("300px"), etc.

Answer 2

DialogBox box = new DialogBox();
RootLayoutPanel.get().add(box);
RootLayoutPanel.get().setWidgetBottomHeight(box, 0, null, 0, null);
box.center();
box.show();

setWidgetBottomHeight() method to position exactly.