Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

GWT: Change padding of tree rows?

Tags:

java

css

tree

gwt

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;
 }
like image 544
Epaga Avatar asked Mar 22 '10 13:03

Epaga


1 Answers

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);
like image 106
chux Avatar answered Sep 23 '22 01:09

chux