:: Forum >>

Tree Control Style

I am trying to re-style the tree control so that it removes the tree-sign if there is nothing under the particular branch (if it is a leaf).

So far, I have been able to remove the sign the the following CSS:
.aw-tree-leaf .aw-tree-sign {
    display:none;
}

Next, I'd like to add a little padding to the leafs as they all seem to be aligned to the left of the box. This does the trick:
.aw-tree-leaf .aw-item-box {
    margin-left:10px;
}

Now I have run into a problem. The main branch of the control apears perfect. But if I expand one of the sub branches all the leafs line up. I need to add some padding to the left of the leaf. Does anyone know which classes to apply the padding style to? Nothing I try seems to be working.
Aaron Todd
Monday, April 7, 2008
This probably isnt the best way, but I have come up with a working solution. I have taken out what I wrote in my original post and added this:
.aw-tree-leaf .aw-tree-sign {
    visibility:hidden;
}


If there is a better way please let me know.

Thanks
Aaron Todd
Monday, April 7, 2008
You can also use

.aw-tree-leaf .aw-tree-sign {
    background: none;
}


which is basically the same.
Alex (ActiveWidgets)
Monday, April 7, 2008
Thanks Alex,

Is there any way to change the margin of the secondary leaf without changing it for a leaf in the top level. I'm only working with two levels.

Thanks
Aaron Todd
Tuesday, April 8, 2008
.aw-tree-view .aw-tree-view .aw-tree-view .aw-tree-sign {margin-left: 10px}

and so on. See /source/style/common/tree.css
Alex (ActiveWidgets)
Tuesday, April 8, 2008
Thanks again Alex.

One more question if you dont mind...if I have a leaf that contains text that is outside of the tree's width. When I click on it it seems to center the leaf. Can I stop this functionality?

Thanks again
Aaron Todd
Wednesday, April 9, 2008
Maybe this way -

tree.onCurrentItemChanged = function(i){
    this.setTimeout(function(){
        if (AW.ie){
            this.getItem(i).getContent("box").element().scrollLeft = 0;
        }
    });
}
Alex (ActiveWidgets)
Wednesday, April 9, 2008
Seems to do the trick.

Thanks Alex
Aaron Todd
Thursday, April 10, 2008
HI Alex,

I tried the following code but still not able to get the leaf left aligned.

recommendationsTree.onCurrentItemChanged = function(i){ recommendationsTree.setTimeout(function(){
if (AW.ie){ recommendationsTree.getItem(i).getContent("box").element().scrollLeft = 0;
}
});
}
Can you please have a look? Anything I am missing here?
Thanks,
Swapnil.
Tuesday, August 19, 2008

This topic is archived.


Back to support forum

Forum search