:: Forum >> Version 2 >>

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 {
    
backgroundnone;
}
 
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-left10px}
 
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