TreeView css styling question

[James]

I'm trying to style a RADTreeView (Q1 2010)  so that:

1. The line height is reduced so I can fit a large number of nodes in a limited area
2. The extra space and padding on the left side of each node is removed
3. Text wraps with the wrapping text being flush with the text above it

I'm very close but the text wrap isn't working correctly.  When the text wraps, it overlaps with other items in the tree.  See the screen shot - I've highlighted the problem with a red box.

Here is the css I've hacked my way into:

.refinementTreeView .rtLI .rtTop,
.RadTreeView .rtLI .rtMid,
.RadTreeView .rtLI .rtBot
{ height:13px !important;}

.RadTreeView .rtUL
{ padding-top:0px !important; margin-top:0px !important;}

.RadTreeView .rtUL .rtUL
{ padding-top:0px !important; margin-top:0px !important; padding-bottom:0px !important; margin-bottom:0px !important; white-space:normal !important;}

.treeView_NoChilds  { padding: 0 !important; font-size: 9px !important;}

.treeView_NoChilds is being applied in the code behind to each tree node via the ContentCssClass property.

The tree itself is inside a div which is inside a table cell with a fixed width.  The tree in the aspx is defined as:

<telerik:RadTreeView ID="treeViewProduct" runat="server" ShowLineImages="False" AppendDataBoundItems="True" DataFieldID="ID" DataFieldParentID="ParentID" >

Each node is output as a html hyperlink for the product name and text as the count.  Any help would be appreciated.  Thanks.

[Kamen Bundev]

Hello James,

Replace your styles with these and it should work like you want it:
div.RadTreeView .rtLI,
div.RadTreeView .rtLI .rtTop,     
div.RadTreeView .rtLI .rtMid,     
div.RadTreeView .rtLI .rtBot
{
    line-height: 13px;
}
div.RadTreeView .rtPlus,
div.RadTreeView .rtMinus
{
    margin-top: 2px;
}
div.RadTreeView .rtHover .rtIn,
div.RadTreeView .rtSelected .rtIn
{
    padding: 0 2px;
}
div.RadTreeView .rtIn {
    padding: 1px 3px;
    display: inline-block;
}
div.RadTreeView .rtSp
{
    height: 16px;
}
div.RadTreeView .treeView_NoChilds .rtSp
{
    height: 13px;
}
div.RadTreeView .rtUL   
{
    padding-top: 0px;
    margin-top: 0px;
}
div.RadTreeView .rtUL .rtUL   
{
    padding-top: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    white-space: normal;
}
div.RadTreeView .treeView_NoChilds   
{
    padding: 0;
    font-size: 9px;
}

Kind regards,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[James]

That did the trick, thank you!