Question

I have a very simple GWT application which collects some data and provides a confirmation dialog when the user clicks ‘Submit.’ I create a com.google.gwt.user.client.ui.DialogBox, populate it, and call its center() method.

In a desktop web browser, the dialog appears correctly centered. On a cell phone browser, however, the centering doesn’t take zooming into account. That is, if I zoom in on the form, and then click Submit, the dialog is centered in the overall page … not my current real viewport. If I have zoomed in very far, the dialog isn’t visible at all. The application just appears to be dead, unless you are clever enough to zoom out. Roughly the same thing happens on an iPhone and my Android phone.

The effect can be seen from Google demo page at http://gwt.google.com/samples/Showcase/Showcase.html#!CwDialogBox Put your phone in a portrait orientation, zoom in on the Show Dialog Box button, and then click the button. The page will appear frozen. You can’t see the popup and can’t pan around. The only thing you can do is zoom out.

I would be happy with any solution here. For example maybe the dialog can be somehow centered in my “effective” viewport. Or maybe there is some way to ask the browser to zoom back out?

Answer 1

Well, I haven’t figured out how to get information about the actual viewport. That is, what the user can see, after they have zoomed in. But a reasonable solution is to just position the dialog box on top of the submit button. Since they just clicked the submit button, that must be a sensible place to display the dialog.

int targetX = submitButton.getAbsoluteLeft() + (submitButton.getOffsetWidth() - dialogBox.getOffsetWidth()) / 2;
int targetY = submitButton.getAbsoluteTop() + (submitButton.getOffsetHeight() - dialogBox.getOffsetHeight()) / 2;
dialogBox.setPopupPosition(targetX, targetY);