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

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

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

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

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

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

Правое смещение 0px говорит о абсолютной позиции позиции на том горизонтальном месте, о котором я упоминал выше.И, конечно же, размер пикселя может быть> 0, чтобы на столько увеличиваться влево, или даже <0, чтобы так сильно оттягивать его вправо. </p>

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

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

Answer 4

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