使用佈局面板系統將面板置於GWT中

在GWT開發人員網站上，有一個示例顯示了位於頁面中間的面板。使用GWT佈局面板可以在頁面中間固定面板嗎？使用佈局面板系統將面板置於GWT中

http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

2011-04-19 benstpierre

可以實現與簡單的CSS的效果。例如：

<html><head> 
<style> 
.outer { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: blue; 
} 

.inner { 
    position: absolute; 
    top: 25%; 
    right: 25%; 
    bottom: 25%; 
    left: 25%; 
    background-color: red; 
} 
</style> 
</head> 
<body> 
<div class="outer"><div class="inner" /></div> 
</body></html>

一旦基本作用是在普通使用CSS絕對定位的對象創建的，您可以用LayoutPanels重建它，因爲他們基本上是一個CSS約束系統。

來源

2011-04-20 02:26:38 BobV

這不會創建一個固定寬度的內部分區〜 – 2011-04-20 04:00:10

* fixed-percentage *分區的好解決方案。 *固定大小*的解決方案有點不同，但它仍然可以用簡單的CSS！ – 2011-04-20 21:35:02

我不認爲你可以在LayoutPanel中自動製作一個固定寬度的圖層中心。但是，您可以將該圖層插入到DOM中以獲取其大小，然後自己計算正確的偏移量。您可以看到Google如何在DialogBox.center（）的代碼中執行此操作（而不是在LayoutPanel中）。

來源

2011-04-20 03:58:32

有一個很好的老CSS技巧爲中心固定大小，絕對盒，使用自動CSS布點（無需JavaScript的）：

第一中心通過框的左上角top: 50%; left: 50%;
當然，這個盒子對於現在的底部/右邊來說太遠了。
然後使用邊距減去框的高度/寬度的一半。（這是固定大小的，這樣你就可以計算與筆和紙:-)

例「的高度/寬度的一半」：

<!doctype html> 

<html> 
<head> 

<style type="text/css"> 
    .box { 
     position: absolute; 
     background-color: red; 
     height: 300px;  width: 400px; /* Using "px" here, but you */ 
              /* can also use "em" etc. */ 
     top: 50%;   left: 50%; 
     margin-top: -150px; margin-left: -200px; 
    } 
</style> 

</head> 

<body> 
    <div class="box">Box</div> 
</body> 
</html>

應用這種風格到您的LayoutPanel - 我不沒有一個完整的代碼示例，但我認爲它應該是可能的。

來源

2011-04-20 21:31:34

LayoutPanel爲實現NeedsResize接口的子面板提供onResize（）事件。如果各種面板尺寸可能發生變化，您可以使用此掛鉤。 – BobV 2011-04-20 22:49:23

使用佈局面板系統將面板置於GWT中

回答

相關問題