SplitLayoutPanel의 draggers를 GWT UIBinder 템플릿

Question

에 restyle하는 방법은 누구나 SplitLayoutPanel의 UIBinder 템플릿에서 draggers의 스타일을 어떻게 바꿀 수 있는지 말해 줄 수 있습니다. 여기

내 MainMenu.ui.xml입니다 :

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
    <ui:style src="Resources/GlobalStyles.css" /> 

    <g:SplitLayoutPanel width="100%" height="100%" styleName='{style.splitLayoutPanel}'> 
     <g:north size="100"> 
      <g:HTMLPanel/> 
     </g:north> 
     <g:west size="250"> 
      <g:HTMLPanel/> 
     </g:west> 
     <g:center> 
      <g:HTMLPanel/> 
     </g:center> 
     <g:south size="50"> 
      <g:HTMLPanel 
       styleName='{style.footerPanel}'> 
       <div> 
        <a href="#">Contact us</a> 
        <a href="#">Privacy</a> 
        <a href="#">About</a> 
       </div> 
      </g:HTMLPanel> 
     </g:south> 
    </g:SplitLayoutPanel> 

</ui:UiBinder> 

참고 자료/GlobalStyles.css은 다음과 같습니다

body,table { 
    font-size: small; 
} 

body { 
    font-family: Helvetica, Arial, sans-serif; 
    color: #000; 
    background: #red; 
} 

.splitLayoutPanel { 
    .gwt-SplitLayoutPanel-HDragger { 
     background:#d0e4f6; 
     cursor: col-resize; 
    } 

    .gwt-SplitLayoutPanel-VDragger { 
     background: #d0e4f6; 
     cursor: row-resize; 
    } 

} 

.footerPanel { 
    margin-left: 11px; 
    padding: 10px; 
    border-top: 2px solid #5693d6; 
    text-align: right; 
} 

여기에 어떤 문제가 있습니까? 내 draggers는 보이지 않으며 cursus 변경이 없습니다.

Answer 1

GWT는 중첩을 좋아하지 않는다고 생각합니다. 그것이 작동되도록해야 다음과 같이 그래서 CSS를 rewritting :

.splitLayoutPanel .gwt-SplitLayoutPanel-HDragger { 
    background:#d0e4f6; 
    cursor: col-resize; 
} 
.splitLayoutPanel .gwt-SplitLayoutPanel-VDragger { 
    background: #d0e4f6; 
    cursor: row-resize; 
} 

또한 GWT 아마 .gwt- 스타일에 대해 불평 할 것이다,이 경우 귀하의 CSS에 다음과 같은 라인 :

@external .gwt-SplitLayoutPanel-HDragger; 
@external .gwt-SplitLayoutPanel-VDragger;