static positioning of the GWT popuppanel

Question

I'm using a GWT popup panel for displaying some information stacked up vertically in my jsp page. The problem I'm facing is that, once the popup panel is displayed, it doesn't hold on to its set position. I'm setting the position of the popup panel using setPopupPosition(). However, whenever the user scrolls the browser, the popup panel displayed moves up and down accordingly. It doesn't maintain its original position, where it was displayed.

I've tried setting the css property to (position: fixed;) applied on the popup panel, but it doesn't work. I read someplace, that in order for an html element to be displayed statically, we can use the position: fixed, and width: 100% to achieve that. But in my case, I can't set the width to 100%, since I need the popup panel to be displayed for a specific size.

Is there a way to achieve the fixed position of the popup panel in GWT? Would I have to listen to browser's scrollbar events in order to fix the position or can it be handled differently.

This is my piece of code, which I use to set the popup panel's position in GWT.

           final PopupPanel simplePopup = new PopupPanel(false);
           _beamMenu = simplePopup;
           rendererDisplay(response, simplePopup,true);
           int left =_beamIcon.getAbsoluteLeft() + _beamIcon.getOffsetWidth() - simplePopup.getOffsetWidth();
           int top = _beamIcon.getAbsoluteTop() - simplePopup.getOffsetHeight();
           simplePopup.setPopupPosition(left, top);

Any help in this regard will be highly appreciated.

Many thanks, Asheesh

score 4 · Answer 1 · edited Dec 11 '12 at 00:26

4

add a css with: position: fixed !important;

edited Dec 11 '12 at 00:26

ekhumoro

115,249
20
229
336

answered Dec 11 '12 at 00:04

zhe

41
1

score 2 · Answer 2 · answered Dec 24 '11 at 02:41

The default behavior of the PopupPanel should be enough. You actually want position: absolute and not fixed. (See http://www.quirksmode.org/css/position.html for an explanation of position types, but fixed is when it appears to float as you scroll).

The issue you are likely running into, is that when you show the PopupPanel, it gets removed from wherever it was in the DOM, and added to the RootPanel:

(This is from GWT 2.4 so your exact code may very)

public void show() {
    if (showing) {
        return;
    } else if (isAttached()) {
        // The popup is attached directly to another panel, so we need to remove
        // it from its parent before showing it. This is a weird use case, but
        // since PopupPanel is a Widget, its legal.
        this.removeFromParent();
    }
    resizeAnimation.setState(true, false);
}

...

public void setState(boolean showing, boolean isUnloading) {
    ...
    RootPanel.get().add(curPanel);
    ...
}

As a result, though the position: absolute should be enough, likely your other top level Widgets are also absolutely positioned. Therefore, when you scroll the page you are likely actually scrolling the contents of one of your other widgets, and the PopupPanel is stuck to the outer element, which does not have a large offset-height and is not being scrolled. This is why it appears to have the same behavior as if it were using fixed positioning (i.e. always XX pixels from the top and side of the browser window).

Go back and look at your page construction and fix the other Widgets and you should be fine. From my observations, the new LayoutPanels use position: absolute all over the place, so you may have to manually set it to relative.

static positioning of the GWT popuppanel

2 Answers2

Linked