更改GWT子菜单弹出位置

在菜单栏中，子菜单通常显示在右侧。我想换到左手边。谁能告诉我，我该怎么做呢？

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

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

弹出窗口位置子菜单由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”）

子菜单的弹出位置由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”）

尝试一下，我也可以通过更改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的默认菜单栏实现设置css后更改css。

---

此行“$（menuBar）.closest（.gwt MenuBarPopup”）.get（0）；”将搜索DOM树，直到找到类为.gwt MenuBarPopup的元素，该类是您要更改的元素。

我还可以通过更改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的默认菜单栏实现设置css后更改css。

---

这一行“$（menuBar）.closest（“.gwt MenuBarPopup”）.get（0）；”将搜索DOM树，直到找到类为.gwt MenuBarPopup的元素，这是您要更改的元素。

我的解决方案在某种程度上是目前为止发布的解决方案的混合体，但我认为它比它们中的任何一个都更干净/简单

每个垂直子菜单本身就是一个

菜单栏

，作为项目添加到顶层

菜单栏

。对于要放到左边而不是右边的任何子菜单，请使用该

菜单栏上的
.addStyleName（“myLeftDropDownStyleName”）
向其添加样式类名

定义该样式的选择器规则，如下所示（这些是我获得左下拉列表所需的最小属性）：

.myLeftDropDownStyleName{
位置：绝对位置；
右：0px；
}

相对于第一父元素的位置，该位置不是静态的；至少在我的例子中，父位置似乎是水平位置，在该位置下拉列表有其左边缘，而没有此解决方案。如果这个职位在其他人的情况下能更好地发挥作用，我也不会感到惊讶

右偏移量0px表示绝对位置的右边位于我上面提到的水平位置。当然，像素大小可以是>0以进一步向左推动那么多，或者甚至<0以向右拉动那么多

---

这对我来说非常有效，简单明了，并且不会强迫你所有的菜单栏都采用这种风格（我认为如果你自己对其中一种GWT菜单栏风格进行了改写，情况就是这样）。

我的解决方案在某种程度上是迄今为止在这里发布的解决方案的混合体，但我认为它比它们中的任何一种都更干净/简单

每个垂直子菜单本身就是一个

菜单栏

，作为项目添加到顶层

菜单栏

。对于要放到左边而不是右边的任何子菜单，请使用该

菜单栏上的
.addStyleName（“myLeftDropDownStyleName”）
向其添加样式类名

定义该样式的选择器规则，如下所示（这些是我获得左下拉列表所需的最小属性）：

.myLeftDropDownStyleName{
位置：绝对位置；
右：0px；
}

相对于第一父元素的位置，该位置不是静态的；至少在我的例子中，父位置似乎是水平位置，在该位置下拉列表有其左边缘，而没有此解决方案。如果这个职位在其他人的情况下能更好地发挥作用，我也不会感到惊讶

右偏移量0px表示绝对位置的右边位于我上面提到的水平位置。当然，像素大小可以是>0以进一步向左推动那么多，或者甚至<0以向右拉动那么多

---

这对我来说非常有效，简单明了，并且不会强迫你所有的菜单栏都使用这种样式（我认为如果你自己对其中一种GWT菜单栏样式进行了重写，就会出现这种情况）。

我知道这只能通过这种方式来实现。但是你能告诉我需要覆盖哪些样式吗？我在firebug中打开了一个示例菜单栏，看到所有菜单栏的项都有CSS样式类“gwt MenuItem”。此外，每个项目都有其标识符，如“gwt-uid-1”、“gwt-uid-2”等。如果要覆盖元素的默认样式，请连接到主机页、CSS文件并为所需的类和ID写入新属性。我建议您在连接GWT脚本之后，将CSS文件连接到主机页的节头的末尾，否则更改无法覆盖默认样式。如果你愿意的话，我可以描述我所做的事情）我知道这只能通过这一点来实现。但是你能告诉我需要覆盖哪些样式吗？我在firebug中打开了一个示例菜单栏，看到所有菜单栏的项都有CSS样式类“gwt MenuItem”。此外，每一项都有我