GWT: ¿cambia el relleno de las filas de árboles?

árbol

Un GWT se ve más o menos así:GWT: ¿cambia el relleno de las filas de árboles?

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

Mi pregunta es: ¿cómo debería cambiar el relleno de las filas de árboles individuales? Supongo que podría hacer algo en la línea de establecer reglas CSS para .gwt-Tree > div, pero eso parece hacky. ¿Hay una manera más elegante?

Resolución: Al parecer no hay una forma más elegante. Aquí es lo que hicimos, 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; 
}

Fuente

2010-03-22 Epaga

Se podía hacerlo de esta manera:

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

Tenga en cuenta que div .gwt-árbol afectará a todos los divs niño, así que hay que restablecer de nuevo a el estilo que quieras con .gwt-Tree div .gwtTreeItem.

Acerca del "hacky>" dijiste -> selector es compatible con todos los navegadores excepto con IE6 que no lo reconocen.

Fuente

2010-03-22 13:38:45 easwee

lo siento No creo que eso es lo que soy buscando: eso me permite personalizar el CSS del primer o tercer nivel div, pero no el del segundo nivel, el que tiene el relleno ... – Epaga

Aha lo siento - no entendí su pregunta - respuesta editada. – easwee

Eché un vistazo a GWT Tree Documentation. Las reglas de estilo CSS para los elementos del árbol y el árbol son

Reglas de estilos CSS

.gwt-árbol
el árbol en sí

.gwt-Árbol-.gwt TreeItem
un elemento de árbol

.gwt-Árbol-.gwt TreeItem-seleccionado
un árbol seleccionada elemento

Es posible que desee añadir el relleno para .gwt-Árbol-.gwt TreeItem y para .gwt-árbol. gwt-TreeItem-selected

Fuente

2010-03-22 14:46:49 Carnell

La pregunta no era sobre el elemento TreeItem, sino sobre el div entre Tree y TreeItem. – gamma

@gamma ... La página a la que hago referencia enumera TreeItem y Tree. Entonces, el nombre de div/css para TreeItem aparece allí. También aparece en el texto de mi respuesta. Lea todo el documento antes de votar. – Carnell

@Carnell desafortunadamente Gamma tiene razón: si ve mi pregunta, verá tres niveles: el árbol (gwt-tree), el segundo nivel con el relleno que quiero cambiar, y el árbol (gwt-treeitem) . Y la pregunta es sobre el diseño del div que CONTIENE el árbol. – Epaga

Tuve el mismo problema e intenté resolverlo con CSS, pero no tuve suerte. fin he conseguido cambiar el relleno superior e inferior en el código 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); 
     } 
     } 
    }

utilizo el método como este en el código:

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

Fuente

2011-07-08 11:52:29 chux

GWT: ¿cambia el relleno de las filas de árboles?

Respuesta

Cuestiones relacionadas