GWTのレイアウトの問題

Question

私は、このようなレイアウト構造を有する： 1）まずSimpleLayoutPanel メイン（グリーンボーダー） 2）私は、メイン（赤枠にDockLayoutPanel 子を追加したい産む; 25のピクセルの余白）

を

私はこれを実装しましたが、添付ファイル（.jpg）で示された結果は、私にとっては奇妙です。 だから、すべての赤（上、左、右、下）子の境界はメインが、子パネルシフト内にある必要があります。どのようにしてこのロジックを正しい方法で実装できますか？私は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; 
} 

Answer 1

これは境界のHTML定義に関係しています！

例を挙げて説明します。

DockLayoutPanelは500x500pxです。マージン、パディング、ボーダーが0pxの100x100％の子要素を配置します。要素のサイズは500x500pxになります。あなたは3pxの境界線を付けません。つまり、高さと幅に3pxが追加されます。したがって、要素のサイズは506x506ピクセルです。 オーバーフローは無視されます。

結果は2番目の画像です。

これは正しいhtmlの動作で、GWTとは関係ありません。

Answer 2

私は100％高さと幅の.moduleBody CSSを削除してこの問題を解決しました。 そのような状況を避けるために、子要素を100％の高さと幅でサイズするべきではありません。 ありがとうございました！