更改GWT SubMenu弹出窗口位置

Question

在菜单栏中，子菜单通常显示在右侧。我想换到左手边。有没有人可以让我知道，我该怎么做？

Answer 1

子菜单的弹出位置由CSS元素根据菜单项的位置在呈现时定义。

在主菜单上通过Firebug查看它产生的：

element.style {
    clip: rect(auto, auto, auto, auto);
    left: 337px; // Change this to left:35px;
    overflow: visible;
    position: absolute;
    top: 319px;
    visibility: visible;
}

// This is main CSS for popup
.gwt-MenuBarPopup{
}

因此，可以通过在代码中使用setStyleName("css goes here")来尝试一下

Answer 2

我再次建议您覆盖默认样式GWT:)当我必须更改GWT元素的一些标准视图时，我在项目中使用了此方法。

Answer 3

我也可以通过改变css来实现一个解决方案。也许这不是最优雅的方式，但它是有效的。使用GwtQuery的closest()方法的一些帮助，下面是一个简短的示例。

        menuBar.addAttachHandler(new AttachEvent.Handler() {            
        @Override
        public void onAttachOrDetach(AttachEvent event) {
            if(event.isAttached()){
                Scheduler.get().scheduleDeferred(new ScheduledCommand() {                       
                    @Override
                    public void execute() {
                        Element e = $(menuBar).closest(".gwt-MenuBarPopup").get(0);
                        e.getStyle().setLeft(parentMenuBar.getAbsoluteLeft()-menuBar.getOffsetWidth() , Unit.PX);
                    }
                });                 
            }
        }
    });

因此，当附加了子菜单时，您想要更改css。我使用了一个延迟命令，以便在GWT的默认MenuBar实现设置它之后更改css。这一行，"$(menuBar).closest(".gwt-MenuBarPopup").get(0);“将在DOM树中搜索，直到找到您想要更改的类为.gwt-MenuBarPopup的元素。