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

text-overflow:ellipsis doesn't work in RadTreeView

2 Answers 187 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 23 Apr 2009, 10:48 AM
Here's my code:

<radTelerik:RadTreeView ID="t" runat="server" style="width:200px;white-space:normal;overflow: hidden;text-overflow:ellipsis;" EnableEmbeddedScripts="False" Skin="Vista" >

But the radtreeview still has text-overflow: clip; behavior on long texts. Can someone from telerik help me?

Thanks.

2 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 27 Apr 2009, 08:26 AM
Hello Tom,

You can trigger the ellipsis functionality only on the elements that contain text - in the case of RadTreeView, these are the span.rtIn elements. Therefore, the following CSS will work:
    div.RadTreeView .rtIn
    {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 200px;
        display: inline-block;
        padding: 3px 3px 2px;
    }
    div.RadTreeView .rtHover .rtIn,
    div.RadTreeView .rtSelected .rtIn
    {
        padding: 2px 2px 1px;
    }


(the paddings are adjusted due to the inline-block display, which is required for the width to work)

The drawback of this approach is that you have to set the width of the items. You can do so on a per-level basis, subtracting the width of the node lines (it's easier than it sounds):

    div.RadTreeView .rtUL .rtIn { width: 200px; }
    div.RadTreeView .rtUL .rtUL .rtIn { width: 180px; }
    div.RadTreeView .rtUL .rtUL .rtUL .rtIn { width: 160px; }


You can find a sample project attached to this post.

All the best,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
iTools
Top achievements
Rank 1
answered on 24 Jun 2010, 02:15 AM
Using width as 90% seems to work fine too...
    div.RadTreeView .rtIn 
    { 
        overflowhidden
        text-overflow: ellipsis; 
        width: 90%
        displayinline-block
        padding3px 3px 2px
    } 
    div.RadTreeView .rtHover .rtIn, 
    div.RadTreeView .rtSelected .rtIn 
    { 
        padding2px 2px 1px
    } 
Tags
TreeView
Asked by
Brian
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
iTools
Top achievements
Rank 1
Share this question
or