GWT: modifica il riempimento delle righe degli alberi?

Un GWT albero sembra grosso modo così:GWT: modifica il riempimento delle righe degli alberi?

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

La mia domanda è: come dovrei cambiare l'imbottitura dei singoli filari di alberi? Suppongo che potrei fare qualcosa sulla falsariga di impostare le regole CSS per .gwt-Tree > div ma sembra hacky. C'è un modo più elegante?

Risoluzione: A quanto pare non c'è un modo più elegante. Ecco quello che abbiamo fatto, 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; 
}

fonte

2010-03-22 Epaga

Si potrebbe fare così:

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

noti che .gwt-Tree div avrà effetto su tutti i div bambino, in modo da avere per ripristinare di nuovo a lo stile che vuoi con .gwt-Tree div .gwtTreeItem.

Informazioni su "hacky>" hai detto -> il selettore è supportato in tutti i browser ad eccezione di IE6 che non lo riconoscerà.

fonte

2010-03-22 13:38:45 easwee

dispiace non credo che è quello che sto cercando: che mi permetta di personalizzare il CSS del div del primo o del terzo livello, ma non il div del secondo livello, quello del padding ... – Epaga

Aha scusa - ho capito male la tua domanda - risposta modificata. – easwee

Ho dato un'occhiata al GWT Tree Documentation. Le regole di stile CSS per gli elementi albero e albero sono

regole di stile CSS

.gwt-Tree
l'albero stesso

.gwt-Tree .gwt-TreeItem
un articolo albero

.gwt-Tree .gwt-TreeItem-selezionato
un albero selezionato voce

Probabilmente si desidera aggiungere l'imbottitura per .gwt-Tree .gwt-TreeItem e .gwt-Tree. gwt-TreeItem-selected

fonte

2010-03-22 14:46:49 Carnell

La domanda non riguardava il div TreeItem, ma il div tra l'albero e TreeItem. – gamma

@gamma ... La pagina a cui faccio riferimento elenca TreeItem e Tree. Quindi il nome div/css per TreeItem è elencato qui. È anche elencato nel testo della mia risposta. Leggi l'intero documento prima di votare. – Carnell

@Carnell sfortunatamente Gamma ha ragione: se vedi la mia domanda, vedrai tre livelli: l'albero (gwt-tree), il secondo livello con il padding che voglio cambiare, e il treeitem (gwt-treeitem) . E la domanda riguarda lo styling del div che CONTA i treeitem. – Epaga

Ho avuto lo stesso problema e ho provato anche a risolverlo con i CSS, ma senza fortuna. Finalmente sono riuscito a cambiare il padding superiore e inferiore nel codice 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); 
     } 
     } 
    }

io uso il metodo come questo nel codice:

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

fonte

2011-07-08 11:52:29 chux

GWT: modifica il riempimento delle righe degli alberi?

risposta

Problemi correlati