如何在GWT中獨立於DockPanel.CENTER設計DockPanel.NORTH元素

在我的GWT應用程序中，我使用了一個停靠面板，其中DockPanel.NORTH是MenuBar組件，實現了我的導航欄，而DockPanel.CENTER位置的組件顯示了不同的面板根據導航欄中選擇的選項（是DeckPanel）。如何在GWT中獨立於DockPanel.CENTER設計DockPanel.NORTH元素

我的問題是，DockPanel.NORTH上的導航欄始終與左側對齊。當DeckPanel切換到更寬的組件時，導航欄也會移動。因此，對於DeckPanel中的每個面板，導航欄可能處於不同的位置，這對用戶來說很煩人。對我來說這將是非常好的，這個組件在DockPanel.NORTH可以始終居中，但似乎我可以集中DockPanel本身，但不是DockPanel.NORTH中的組件。

所有在此DockPanel中的成分與

.navigationPanel{ 
    margin-left: auto; 
    margin-right: auto; 
    text-align:justify; 
}

GWT的UI粘結劑風格爲MenuBar產品：

<g:DockPanel> 
    <g:Dock direction='NORTH' > 
     <g:MenuBar ui:field="mainMenu"/> 
    </g:Dock> 
</g:DockPanel>

我曾嘗試與其他屬性玩，像.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);沒有成功。要麼，我一直沒能調整到正確的屬性在MenuBar組件UiBinder接口

.gwt-MenuBar{ 
    align: center !important; 
}

樣式屬性。

有人能幫我糾正這種行爲嗎？

來源

2014-10-16 Diego

底座面板是否有寬度參數集？如果不是這可能會有幫助。您也可以通過添加寬度並設置邊距選項來居中包裝面板。我會更新答案。看到這裏http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page – 2014-10-17 13:51:37

只是一個想法，可能有助於不知道沒有看到整個模板。嘗試將菜單欄包裝在SimplePanel或FlowPanel中，並添加一個用於顯示：塊的樣式。這只是一個猜測，因爲我不完全確定你的問題是什麼樣子。你也應該在DockPanel上設置一個寬度，以防止它一直調整大小。如果它有一個寬度，它最好知道最初在哪裏居中菜單欄。否則它會在容器增長或收縮時移動。

<style> 

.menubar-wrapper { 
    width: 100px; 
    margin: 0 auto; 
} 
</style> 


<g:DockPanel> 
    <g:Dock direction='NORTH' > 
     <g:SimplePanel styleName="{style.menubar-wrapper}"> 
      <g:MenuBar ui:field="mainMenu"/> 
     </g:SimplePanel> 
    </g:Dock> 
</g:DockPanel>

如果這沒有幫助，你可以嘗試添加一個樣式到菜單欄float：left;

來源

2014-10-16 22:53:23

謝謝，但它沒有奏效。我編輯了答案，試圖更好地解釋我的問題。我的問題是，即使我將DockPanel居中放置，NORTH位置的組件似乎左對齊，因此當CENTER中顯示的組件改變其寬度時，它似乎會移動。 – Diego 2014-10-17 13:41:55

謝謝，我無法將導航欄居中於NORTH，但至少現在每次選擇新面板時都不會「滑動」。我會提出這個問題一些時間，如果我找不到合適的解決方案，我會接受你的答案作爲最有幫助的。再次感謝。 – Diego 2014-10-17 14:23:24

您應該嘗試打開瀏覽器的開發人員工具並查看佈局。你也可以在那裏調整風格，讓它們正確。簡單面板的父容器也需要設置寬度。如果它有一個寬度，那麼包裝應該居中。 – 2014-10-17 14:37:31

如何在GWT中獨立於DockPanel.CENTER設計DockPanel.NORTH元素

回答

相關問題