ansaurus

Question

Answer 1

+1 A:

You could do it like this:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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.

easwee 2010-03-22 13:38:45

sorry i don't think that's what i'm looking for: that allows me to customize the CSS of the first or third level div, but not the second-level div, the one with the padding...

Epaga 2010-03-22 13:40:04

Aha sorry - i missunderstood your question - edited answer.

easwee 2010-03-22 14:23:45

Answer 2

A:

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

Carnell 2010-03-22 14:46:49

The question was not about the TreeItem div, but the div between the Tree and the TreeItem.

gamma 2010-03-22 14:56:46

@gamma ... The page i reference to lists the TreeItem and Tree. So the div/css name for the TreeItem is listed there. Its also listed in the text of my answer. Read the entire doc before down voting.

Carnell 2010-03-22 18:41:26

@Carnell unfortunately Gamma is right though: if you see my question, you'll see three levels: the tree (gwt-tree), the second level with the padding that I want to change, and the treeitem (gwt-treeitem). And the question is about styling the div which CONTAINS the treeitem.

Epaga 2010-03-23 07:17:37

@Epaga Check my edited question.

easwee 2010-03-23 09:59:00

You really shouldn't be doing anything with the div in between the gwt-Tree and the gwt-TreeItem. This is just an extra div that could eaisly go away in future GWT releases. Also from your example it looks like there is always only one get-TreeItem div contained within this middle div. If this is the case using either this middle div or the get-TreeItem would have similar behavior.

Carnell 2010-03-23 14:51:46

@Carnell The problem is that setting padding on gwt-TreeItem does not change the padding of the tree items! The padding is still defined by the surrounding div.

Epaga 2010-03-25 10:55:28

@Epaga If that is the case it sounds like there is a GWT bug. You should open one up at http://code.google.com/p/google-web-toolkit/issues/list

Carnell 2010-03-25 15:58:33

ansaurus

tags:

views:

answers:

GWT: Change padding of tree rows?

related questions