如何重新設置GWT UIBinder模板中的SplitLayoutPanel的拖動器

Question

任何人都可以告訴我如何在SplitLayoutPanel的UIBinder模板中更改拖動器的風格。

這裏是我的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; 
} 

有什麼不對嗎？我的拖車不可見，並且沒有改變。

Answer 1

我認爲GWT不喜歡嵌套。所以rewritting的CSS如下應該使其工作：

.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;