2010-03-22 15 views
5

GWT drzewo wygląda mniej więcej tak:GWT: Zmienić wypełnienie rzędów drzew?

<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> 

Moje pytanie brzmi: w jaki sposób należy zmienić dopełnienie poszczególnych rzędach drzew? Przypuszczam, że mógłbym zrobić coś na kształt ustawiania reguł CSS dla .gwt-Tree > div, ale wydaje się to być odlotowe. Czy istnieje bardziej elegancki sposób?


Rozdzielczość: Podobno nie ma bardziej elegancki sposób. Oto, co zrobiliśmy, 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; 
} 

Odpowiedz

2

Można to zrobić tak:

<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> 

Zauważ, że .gwt-Tree div będzie dotyczyć wszystkich div dzieci, więc trzeba przywrócić je z powrotem do pożądany styl z .gwt-Tree div .gwtTreeItem.

Informacje o "hacky>" powiedziałeś -> selektor jest obsługiwany we wszystkich przeglądarkach z wyjątkiem IE6, który nie rozpoznaje go.

+0

Niestety nie sądzę, że to, co mam szukam: to pozwala mi dostosować CSS pierwszego lub trzeciego poziomu div, ale nie div drugiego poziomu, ten z padding ... – Epaga

+0

Aha przepraszam - brakuje mi odpowiedzi na pytanie - edytowane odpowiedzi. – easwee

0

Spojrzałem na GWT Tree Documentation. Reguły stylu CSS dla drzewa i drzewa przedmioty są

reguły stylów CSS

.gwt-Tree
samo drzewo

.gwt-Tree .gwt-treeitem
element drzewa

.gwt-Tree .gwt-treeitem wybranych
wybrany drzewo poz

Prawdopodobnie chcesz dodać dopełnienie do .gwt drzewo .gwt-treeitem i .gwt drzewa. gwt-TreeItem-selected-

+0

Pytanie nie dotyczyło elementu TreeItem, ale dzielenia między drzewem a drzewkiem. – gamma

+0

@gamma ... Strona, do której się odwołuję, zawiera listę TreeItem i drzewa. Tak więc jest tam podana nazwa div/css dla TreeItem. Jest również wymieniony w tekście mojej odpowiedzi. Przeczytaj cały dokument przed głosowaniem w dół. – Carnell

+0

@Carnell niestety Gamma ma rację: jeśli zobaczysz moje pytanie, zobaczysz trzy poziomy: drzewo (drzewo-gwt), drugi poziom z dopełnieniem, które chcę zmienić, oraz treeitem (gwt-treeitem) . Pytanie dotyczy stylizacji elementu div, który ZAWIERA treeitem. – Epaga

3

Miałem ten sam problem i próbowałem go rozwiązać za pomocą CSS, ale bez powodzenia. Wreszcie udało mi się zmienić górną i dolną wyściółkę w kodzie Java:

/** 
    * 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); 
     } 
     } 
    } 

używam metody jak to w kodzie:

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);