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.

score 2 · Accepted Answer · answered Dec 20 '10 at 01:05

2

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();
    }
});

answered Dec 20 '10 at 01:05

raisercostin

8,777
5
67
76

Using `GWT.runAsync` will mean it will be compiled into a separate script, which is probably not what you want here. It's likely better to use `DeferredCommand` or GWT 2.1's `Scheduler.get()...`. or use the prefetching as zOObs suggests. – Hilbrand Bouwkamp Dec 20 '10 at 10:11
The use of GWT.runAsync is intended, for performance reasons. Basically I have a page with many small images (loaded through a ClientBundle) and I expect only some users to click here and there to see a zoomed image. I realized through long debugging hours that the center() method was called, before width/height of the image is known. That's why we need an onLoad center. We need the second center outside of the onLoad method because the image might be cashed as well. – raisercostin Jan 03 '11 at 20:18

score 1 · Answer 2 · answered Jan 08 '11 at 09:09

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.

yes you're right, if the image is not loaded from cache the image is loaded in a wrong location. I still don't think that your solution will work. Could you provide a sample please? — raisercostin, Feb 28 '11 at 20:11

score 0 · Answer 3 · answered Feb 15 '12 at 15:38

    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.

gwt Popup is not centered

3 Answers3