Изменить местоположение всплывающего окна подменю 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") из кода

Я снова советую вам переопределить стили GWT по умолчанию :) Я использовал этот метод на своем проекте, когда мне нужно было изменить какой-то стандартный вид GWT-элементов.

Я смог реализовать решение, изменив и css. Возможно, это не самый элегантный способ, но он работает. Используя небольшую помощь метода GwtQuery close(), вот небольшой пример.

        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. Я использую отложенную команду, чтобы она изменила CSS после того, как реализация MenuBar по умолчанию GWT установит его. Эта строка "$(menuBar).closest(".gwt-MenuBarPopup").get(0);" будет искать дерево DOM, пока не найдет элемент с классом .gwt-MenuBarPopup, который вы хотите изменить.

Мое решение представляет собой своего рода гибрид тех, что были опубликованы до сих пор здесь, но я думаю, что оно чище/проще, чем любое из них.

1. Каждое вертикальное подменю само по себе является MenuBar, добавленным как элемент к верхнему уровню MenuBar. Для любого подменю, которое вы хотите переместить влево, а не вправо, добавьте к нему имя класса стиля, используя .addStyleName("myLeftDropDownStyleName") на этом MenuBar виджете.

2. Определите правило селектора для этого стиля следующим образом (это минимальные атрибуты, которые были необходимы мне, чтобы получить левое удаление):

   .myLeftDropDownStyleName{ position: absolute; right: 0px; }

Абсолютные позиции относительно первого родительского элемента с позицией, отличной от статической; по крайней мере, в моем случае эта родительская позиция казалась горизонтальной, где выпадающий список в противном случае имеет левый край без этого решения. Я не удивлюсь, если Относительное положение может работать лучше в некоторых случаях других людей.

Смещение по правому краю, равное 0px, говорит, что абсолютное право положения должно находиться в том горизонтальном месте, о котором я упоминал выше. И, конечно же, размер пикселя может быть > 0, чтобы сдвинуть его влево на столько же, или даже ‹ 0, чтобы сдвинуть его вправо на столько же.

Это отлично работает для меня, просто и понятно, и не заставляет все ваши MenuBar иметь этот стиль (как я думаю, было бы в случае, если вы сами переопределили один из стилей MenuBar GWT).