GWT 하위 메뉴 팝업 위치 변경

Question

메뉴 모음에서는 일반적으로 오른쪽에 하위 메뉴가 표시됩니다. 왼쪽 편으로 변경하고 싶습니다. 누구든지 알려 주시기 바랍니다, 어떻게 그것을 할 수 있습니까?

Answer 1

하위 메뉴의 팝업 위치는 메뉴 항목의 위치에 따라 렌더링시 CSS 요소에 의해 정의됩니다.

이 찾고 통해 방화범 메인 메뉴에 그것은 생산 :

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{ 
} 

그래서, 나는뿐만 아니라 CSS를 변경하여 솔루션을 구현할 수 있었다 코드

Answer 2

다시 기본 스타일을 재정의하는 것이 좋습니다. GWT :) GWT 요소의 표준보기를 변경해야 할 때 프로젝트에서이 방법을 사용했습니다.

Answer 3

에서 setStyleName("css goes here")를 사용하여 한 번 사용해 보시기 바랍니다. 아마도 이것은 가장 우아한 방법은 아니지만 작동합니다. 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를 설정 한 후에 CSS를 변경하도록 지연 명령을 사용합니다. 이 줄 "$ (menuBar) .closest (". gwt-MenuBarPopup "). get (0);" 변경하려는 .gwt-MenuBarPopup 클래스가있는 요소를 찾을 때까지 DOM 트리를 검색합니다.

Answer 4

내 솔루션은 지금까지 게시 된 것들의 하이브리드 중 일부이지만, 나는 그것들 중 어느 것보다 깨끗하고/더 간단하다고 생각합니다. 각 수직 서브 메뉴 자체가 MenuBar이다

1. 는 최상위 MenuBar에 항목으로 추가. 오른쪽 대신 왼쪽으로 놓을 하위 메뉴의 경우 MenuBar 위젯에 .addStyleName("myLeftDropDownStyleName")을 사용하여 스타일 클래스 이름을 추가하십시오. (나 왼쪽 낙하를 얻기 위해 이러한 필요했다 최소한의 속성이다)

2. 는 다음과 같이 해당 스타일에 대한 선택 규칙을 정의합니다

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

Absolute 위치를 처음에 상대적으로 static이 아닌 다른 위치의 부모 요소. 적어도 제 경우에는 상위 위치가 드롭 다운이 그렇지 않으면 왼쪽 가장자리가있는 수평 위치 인 것처럼 보였습니다. Relative 직위가 다른 사람들의 경우에 더 잘 작동한다면 저는 놀랄 것입니다.

오른쪽 오프셋 0px는 위에서 언급 한 수평 위치에있는 절대 위치의 권한을 나타냅니다. 물론 픽셀 크기가 0보다 커서 왼쪽으로 더 많이 밀릴 수도 있고 심지어는 < 0으로 그만큼 오른쪽으로 되돌릴 수도 있습니다. (당신은 GWT MenuBar의 스타일 스스로가 하나 오버라이드 경우 나는 경우 것 생각하는)

이 나를 위해 완벽하게 작동은 & 간단한 청소이며,이 스타일이 당신의 메뉴 모음의 모든을 강요하지 않습니다.