GWT 弹出面板的静态定位答案

【问题标题】：static positioning of the GWT popuppanelGWT 弹出面板的静态定位
【发布时间】：2011-11-15 05:57:14
【问题描述】：

我正在使用 GWT 弹出面板来显示一些在我的 jsp 页面中垂直堆叠的信息。我面临的问题是，一旦显示弹出面板，它就不会保持其设定位置。我正在使用 setPopupPosition() 设置弹出面板的位置。但是，每当用户滚动浏览器时，显示的弹出面板就会相应地上下移动。它不会保持其显示的原始位置。

我尝试将 css 属性设置为 (position: fixed;) 应用于弹出面板，但它不起作用。我在某个地方读到，为了让 html 元素静态显示，我们可以使用 position: fixed 和 width: 100% 来实现。但就我而言，我无法将宽度设置为 100%，因为我需要以特定尺寸显示弹出面板。

有没有办法实现GWT中弹出面板的固定位置？我是否必须听浏览器的滚动条事件才能固定位置，还是可以用不同的方式处理。

这是我的一段代码，我用它来设置弹出面板在 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);

我们将非常感谢您在这方面的任何帮助。

非常感谢，阿希什

【问题讨论】：

标签： gwt popuppanel

【解决方案1】：

添加一个css：position: fixed !important;

【讨论】：

【解决方案2】：

PopupPanel 的默认行为应该足够了。你实际上想要position: absolute 而不是fixed。（有关位置类型的说明，请参阅http://www.quirksmode.org/css/position.html，但fixed 是在您滚动时显示为浮动）。

您可能遇到的问题是，当您显示 PopupPanel 时，它会从 DOM 中的任何位置删除，并添加到 RootPanel：

（这是来自 GWT 2.4，因此您的确切代码可能非常）

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

因此，虽然position: absolute 应该足够了，但可能您的其他顶级小部件也绝对定位。因此，当您滚动页面时，您可能实际上是在滚动其他小部件之一的内容，并且 PopupPanel 卡在到外部元素，该元素没有大的偏移高度并且不是正在滚动。这就是为什么它似乎具有与使用 fixed 定位相同的行为（即始终距浏览器窗口的顶部和侧面 XX 个像素）。

返回并查看您的页面构造并修复其他小部件，您应该没问题。根据我的观察，新的 LayoutPanel 到处都使用position: absolute，因此您可能必须手动将其设置为relative。

【讨论】：