如何使用RootLayoutPanel和DockPanel設置5％的保證金

我一直在玩GWT 2，我發現很難得到我想要的基本頁面佈局。基本上我使用的是一個DocLayoutPanel，我添加了一個北（標題），南（頁腳），西（導航）和內容區域。我希望文檔面板佔用頁面的90％並居中。這將給出一個不錯的5％的保證金。然而，由於GWT使用頂部，左側，右側和底部樣式，它使用我的正常策略（margin：auto）來居中不起作用。如何使用RootLayoutPanel和DockPanel設置5％的保證金

我怎樣才能完成我想要的GWT方式？

來源

2010-01-24 Ruggs

從閱讀你的問題，目前還不清楚你問什麼，但我想你想整個碼頭面板有一個5％的保證金？

所有GWT 2.0使用CSS絕對定位，這就是爲什麼你看到的頂部/左/右/底款式新* LayoutPanels。這就是爲什麼你對保證金的策略：汽車不起作用。

DockLayoutPanel真的只是佈局。我會建議調整你放在DockLayoutPanel裏面的小部件的邊距，以達到你想要的效果。

我自己拍了一下，我接近了一個答案，但它並不完美。我將標籤放入每個DockPanel中，邊距爲10px，但右邊框和底邊框不顯示邊距。

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 

<ui:style>.label { 
     background: #666; 
     color: #fff; 
     font-size: 14pt; 
     padding: 5px; 
     margin: 10px; 
     height: 100%; 
     width: 100%; 
    }</ui:style> 

<g:DockLayoutPanel unit='PCT'> 
     <g:north size='10'> 
       <g:Label addStyleNames="{style.label}">Top</g:Label> 
     </g:north> 
     <g:center> 
       <g:Label addStyleNames="{style.label}">Body</g:Label> 
     </g:center> 
     <g:west size='10'> 
       <g:Label addStyleNames="{style.label}">West</g:Label> 
     </g:west> 
     <g:south size="10"> 
       <g:Label addStyleNames="{style.label}">South</g:Label> 
     </g:south> 
</g:DockLayoutPanel>

來源

2010-01-25 02:34:28 filsa

我此刻覺得有點傻，但不是使用寬度爲90％和保證金：0汽車;我切換到只給文檔佈局面板一個邊緣。似乎在ie6/ie8/firefox 3.5中工作至今。既然你是唯一一個發佈了，你有一個有趣的想法，你得到的投票和答案。謝謝。 – Ruggs 2010-01-26 14:45:09

添加保證金您DockLayoutPanel的父元素。例如，如果要添加DockLayoutPanel到RootLayoutPanel：

DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM); 
RootLayoutPanel rootPanel = RootLayoutPanel.get(); 
rootPanel.setStylePrimaryName("rootLayoutPanel"); 
rootPanel.add(dockLayoutPanel);

並添加CSS

.rootLayoutPanel { 
    margin: 5px; 
}

來源

2011-12-22 16:05:37 Andrey

如何使用RootLayoutPanel和DockPanel設置5％的保證金

回答

相關問題