GWT PopupPanel incorrect popup position

Question

I'm using GWT PopupPanel to display a popup above a button when user clicks it.

I am setting popup's position and showing it like so:

panel.setPopupPosition(leftPos, topPos);
panel.show();

However, when I inspect the popup's top value after it shows, I see that it is positions slightly lower than what I assigned it.

The issue may be that setPopupPosition changes the values that are passed in:

// Account for the difference between absolute position and the
// body's positioning context.
left -= Document.get().getBodyOffsetLeft();
top -= Document.get().getBodyOffsetTop();

How can I make sure the GWT PopupPanel's position is exactly the values I gave it? setPopupPosition() seems to really be the only way to set the position, but it does some manipulation (which is unnecessary for my use case) to the positions I pass in.

You can use direct access to popup's DOM element styles - e.g. PopupPanel.getElement().getStyle().setPropertyPx("top", topPos); — Alexander Leshkin, Oct 10 '17 at 04:26
Ahh, see I had tried that and it did not work (popup came up at 0,0) but the key is to set those properties after you call `show()`. This works for me because I do not see the popup "jump" as others mention when setting the position after calling `show()`, but I wonder if there is any way to set the position before calling `show()` without using `setPopupPosition()` ? Feel free to answer with your suggestion (be sure to mention doing it after calling `show()` and I will accept! — OMGitzMidgar, Oct 10 '17 at 13:46

score 0 · Answer 1 · answered Oct 11 '17 at 06:50

You can use direct access to popup's DOM element to adjust PopupPanel position. But it should be done after calling show() and before making popup visible. Otherwise, you'll may see some "jump" effects. Example:

PopupPanel popupPanel = new PopupPanel();
...
// this callback will be called after PopupPanel.show(), but before it is shown
popupPanel.setPopupPositionAndShow(new PositionCallback() {
    @Override
    public void setPosition(int offsetWidth, int offsetHeight) {
        Style style = popupPanel.getElement().getStyle();
        style.setLeft(100, Unit.PX);
        style.setTop(100, Unit.PX);
    }
});

GWT PopupPanel incorrect popup position

1 Answers1