GWT佈局問題

我有這樣的佈局結構： 1）首先規定SimpleLayoutPanel 主要（綠色邊框） 2）我想孩子添加DockLayoutPanel主（紅色邊框，25px的邊距）GWT佈局問題

我已經實現了這一點，但附件（.jpg）中顯示的結果對我來說很奇怪。 enter image description here 因此，所有紅（頂部，左側，右側和底部）孩子的邊界應該是內部主要，但孩子面板的變化。我怎樣才能以正確的方式實現這個邏輯？我有3-4級的更復雜的UI結構。而且我也沒有工作沒有利潤。

這裏，它是代碼和CSS：

SimpleLayoutPanel panel = new SimpleLayoutPanel(); 
panel.setStyleName("mainModulePanel"); 
SimpleLayoutPanel p = new SimpleLayoutPanel(); 
p.setStyleName("moduleBody"); 
panel.setWidget(p); 
initWidget(panel); 

//CSS  
.moduleBody { 
/*width: 100%; 
    height: 100%;*/ 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
    border: 3px solid red; 
} 

.mainModulePanel { 
/*margin-top: 5px; 
    margin-bottom: 5px; 
    margin-right: 5px;*/ 
    border: 3px solid green; 
}

來源

2012-01-17 BraginiNI

我已經看到了很多這與所有變化'LayoutPanel'。他們似乎並不尊重適用於所有情況下右側的CSS規則。 – 2012-01-17 15:15:49

我建議打開鉻開發工具，並檢查各種組件的樣式和大小。 Elements選項卡爲您的所有html元素提供了很好的指標。選擇您感興趣的div，然後選擇右側的指標選項卡。 – 2012-01-17 16:09:04

這與用於邊框的HTML定義呢！

讓我來舉個例子來解釋一下。

您的DockLayoutPanel是500x500px。您將100x100％的子元素放入其中，邊距，填充和邊框爲0px。您的元素的尺寸爲500x500像素。不，你給它3px的邊框。這意味着增加了3px的高度和寬度。所以你的元素的大小爲506x506px。溢出被忽略。

結果是你的第二張照片。

這是正確的html行爲，並且與GWT無關！

來源

2012-01-17 15:43:19 Stefan

我已經通過移除100％高度和寬度來解決問題.moduleBody CSS。所以，爲了避免這種情況，你不應該將子元素的高度和寬度設置爲100％。謝謝你們！

來源

2012-01-18 06:04:48 BraginiNI

請將此標記爲答案，以便它出現在列表頂部，並清楚地表明問題已解決。 – 2012-01-18 15:02:20

GWT佈局問題

回答

相關問題