gwt Popup is not centered

Question

I use gwt popup to show some messages, but it is not displayed in the center of the display event if i call popup.center(). Actually it is not centered only the first time, if i close it and open it again every thing is ok, but not the first time. How to fix that?

GWT.runAsync(new RunAsyncCallback() {
    @Override
    public void onSuccess() {
        Image fullImage = new Image(optionImageName);
        fullImage.setAltText("Loading image ...");
        imagePopup.setWidget(fullImage);
        imagePopup.center();
    }
});

I found this question on http://www.devcomments.com/gwt-Popup-is-not-centered-at107182.htm, and today I have had this problem too. I found the answer and i will post it here for future reference.

Answer 1

I found that the problem is that the image is not loaded completed when you center the popup. This happens the first time only because the second time the image is somehow cashed by the browser.

The solution is to center it on the onLoad event as well.

GWT.runAsync(new RunAsyncCallback() {
    @Override
    public void onSuccess() {
        Image fullImage = new Image(optionImageName);
        fullImage.setAltText("Loading image ...");
        fullImage.addLoadHandler(new LoadHandler() {
            @Override
            public void onLoad(LoadEvent event) {
                imagePopup.center();
            }
        });
        imagePopup.setWidget(fullImage);
        imagePopup.center();
    }
});

Answer 2

I had this problem as well. The reason that you have to call center twice is because the popup container is actually removed from the DOM when the popup is "hidden". This is problematic because your popup has to now "show" the contents of the popup before you can check that the image is loaded.

The issue with the implementation recommended is that the first call to center() will be done incorrectly if the image is not cached. The second call to center will correct it. On the browser, this causes a shift of the popup dialog box (which looks pretty bad).

I would recommend the following: 1. Put a waiting spinner in the same display and show that initially. 2. One the loadHandler is called, display the image, hide the spinner, and recenter.

Answer 3

    public void onClick(ClickEvent event) {
            // TODO Auto-generated method stub
            final ADPopup popup = new ADPopup();
            popup.setHeight("300px");
            popup.setWidth("500px");
            popup.setPopupPositionAndShow(new PopupPanel.PositionCallback() {

                public void setPosition(int offsetWidth, int offsetHeight) {
                    // TODO Auto-generated method stub
                    int left = (Window.getClientWidth() - offsetWidth) / 3;
                    int top = (Window.getClientHeight() - offsetHeight) / 3;

                    popup.setPopupPosition(left, top);
                }
            });

            popup.show();
        }

Hope this Help.