This is a migrated thread and some comments may be shown as answers.

TreeView css styling question

2 Answers 91 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 24 May 2010, 07:10 PM
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-size9px !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.

2 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 27 May 2010, 03:36 PM
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.
0
James
Top achievements
Rank 1
answered on 27 May 2010, 06:00 PM
That did the trick, thank you!
Tags
TreeView
Asked by
James
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
James
Top achievements
Rank 1
Share this question
or