読者です 読者をやめる 読者になる 読者になる

DecoratorPanelを使ったが、padding,border,marginが反映されなかったとき

ちょっとはまったので。
以下の内容が記述されたCSSファイルが読み込まれるように自分で設定すること。
たとえば、decoratorPanel.cssという名前のファイルにして読み込む

decoratorPanel.css

.gwt-DecoratorPanel {

}
.gwt-DecoratorPanel .topCenter,
.gwt-DecoratorPanel .bottomCenter {
background: url(images/hborder.png) repeat-x;
}
.gwt-DecoratorPanel .middleLeft,
.gwt-DecoratorPanel .middleRight {
background: url(images/vborder.png) repeat-y;
}
.gwt-DecoratorPanel .topLeftInner,
.gwt-DecoratorPanel .topRightInner,
.gwt-DecoratorPanel .bottomLeftInner,
.gwt-DecoratorPanel .bottomRightInner {
width: 5px;
height: 5px;
zoom: 1;
}
.gwt-DecoratorPanel .topLeft {
background: url(images/corner.png) no-repeat 0px 0px;
-background: url(images/corner_ie6.png) no-repeat 0px 0px;
}
.gwt-DecoratorPanel .topRight {
background: url(images/corner.png) no-repeat -5px 0px;
-background: url(images/corner_ie6.png) no-repeat -5px 0px;
}
.gwt-DecoratorPanel .bottomLeft {
background: url(images/corner.png) no-repeat 0px -5px;
-background: url(images/corner_ie6.png) no-repeat 0px -5px;
}
.gwt-DecoratorPanel .bottomRight {
background: url(images/corner.png) no-repeat -5px -5px;
-background: url(images/corner_ie6.png) no-repeat -5px -5px;
}
html>body .gwt-DecoratorPanel {
}
* html .gwt-DecoratorPanel .topLeftInner,
* html .gwt-DecoratorPanel .topRightInner,
* html .gwt-DecoratorPanel .bottomLeftInner,
* html .gwt-DecoratorPanel .bottomRightInner {
width: 5px;
height: 5px;
overflow: hidden;
}

 
参考
DecoratorPanel (GWT Javadoc)
Showcase of GWT Features