GWT: Change padding of tree rows?
A GWT tree looks roughly like this:
<div class="gwt-Tree">
<div style="padding-top: 3px; padding-right: 3px;
padding-bottom: 3px; margin-left: 0px;
padding-left: 23px;">
<div style="display:inline;" class="gwt-TreeItem">
<table>
...
</table>
</div>
</div>
开发者_高级运维 <div ...>
</div>
...
</div>
My question is: how should I change the padding of the individual tree rows? I suppose I could do something along the lines of setting CSS rules for .gwt-Tree > div but that seems hacky. Is there a more elegant way?
Resolution: Apparently there is NOT a more elegant way. Here is what we did, FWIW:
.gwt-Tree > div:first-child {
width: 0px !important;
height: 0px !important;
margin: 0px !important;
padding: 0px !important;
}
.gwt-Tree > div {
padding: 0px 5px !important;
}
.gwt-Tree > div[hidefocus=true] {
width: 0px !important;
height: 0px !important;
margin: 0px !important;
padding: 0px !important;
}
I had the same problem and tried as well to solve it with CSS, but no luck. Finally I managed to change the top and bottom padding in the java code:
/**
* handle top and bottom padding issue of leafs the grandparent DOM element (div) has disturbing top and bottom
* padding of 3px, which is changed here to 0px
*
* @param uiObject
* uiObject which is a leaf in the tree
*/
private static void correctStyle(final UIObject uiObject) {
if (uiObject instanceof TreeItem) {
if (uiObject != null && uiObject.getElement() != null) {
Element element = uiObject.getElement();
element.getStyle().setPaddingBottom(0, Unit.PX);
element.getStyle().setPaddingTop(0, Unit.PX);
}
} else {
if (uiObject != null && uiObject.getElement() != null && uiObject.getElement().getParentElement() != null
&& uiObject.getElement().getParentElement().getParentElement() != null
&& uiObject.getElement().getParentElement().getParentElement().getStyle() != null) {
Element element = uiObject.getElement().getParentElement().getParentElement();
element.getStyle().setPaddingBottom(0, Unit.PX);
element.getStyle().setPaddingTop(0, Unit.PX);
}
}
}
I use the method like this in the code:
Anchor fileDownloadLink = new Anchor();
fileDownloadLink.setStyleName(ViewConstants.STYLE_LINK_FILE_DOWNLOAD);
fileDownloadLink.setText(subSubStructure.getName());
fileDownloadLink.setHref(ViewConstants.HREF_DOWNLOAD_FILE_EXTRACTED_DATA + subSubStructure.getPath());
treeItem.addItem(fileDownloadLink);
StyleCorrector.correctStyle(fileDownloadLink);
You could do it like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
.gwt-Tree {background:green;}
.gwt-Tree div {padding-top: 3px; padding-right: 3px;padding-bottom: 3px; margin-left: 0px;padding-left: 23px;background:gray;}
.gwt-Tree div .gwt-TreeItem {padding:0;margin:0;background:red;color:#fff;}
</style>
</head>
<body>
<div class="gwt-Tree">
<div>
<div class="gwt-TreeItem">
random
</div>
</div>
<div>
<div class="gwt-TreeItem">
random
</div>
</div>
</div>
</body>
</html>
Note that .gwt-Tree div will affect all child divs, so you have to reset them back to the style you want with .gwt-Tree div .gwtTreeItem.
About the "hacky >" you said - > selector is supported in all browsers except for IE6 who won't recognize it.
I took a look at the GWT Tree Documentation. The CSS style rules for the tree and tree items are
CSS Style Rules
.gwt-Tree
the tree itself.gwt-Tree .gwt-TreeItem
a tree item.gwt-Tree .gwt-TreeItem-selected
a selected tree item
You probably want to add the padding to .gwt-Tree .gwt-TreeItem and to .gwt-Tree .gwt-TreeItem-selected
加载中,请稍侯......
精彩评论