Telerik Forums / UI for ASP.NET AJAX Forum / TreeView /

Word wrap & icon issue

Telerik UI for ASP.NET AJAX
Resources Buy Try

15 posts, 1 answers

HSLaw

159 posts

Member since:
Jan 2006

Posted 29 Jul 2009 Link to this post

Hi, based on the screen cap below, is there a way to make my word wrap not to go under the icon?

http://www.ximnet.com.my/aspnet35/images/treeview_wrap.png
Yana
Admin

5044 posts
Posted 30 Jul 2009 Link to this post

Hi Paladin,

I've attached a simple page to show you the needed approach. Please download it and examine it.

Greetings,
Yana
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.

treeviewwrap.zip

HSLaw

159 posts

Member since:
Jan 2006

Posted 30 Jul 2009 Link to this post

Hi,

I tried the css: http://www.ximnet.com.my/aspnet35/admin/test_treeview.aspx
But some node's text went under the icon.

As seen from my side: http://www.ximnet.com.my/aspnet35/admin/treeview.png

My code:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test_treeView.aspx.cs" Inherits="treeViewWrap" %> 
        
            <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head id="Head1" runat="server">  
        
                <title>Untitled Page</title> 
        
                   <style type="text/css">  
        
                    .RadTreeView   
        
                    {  
        
                        overflow: visible !important;  
        
                    }  
        
                    .RadTreeView .rtImg  
        
                    {  
        
                        vertical-align: top !important;  
        
                    }  
        
                    .RadTreeView .rtIn {  
        
                        display:inline-block !important;  
        
                        white-space:normal !important;   
        
                    }  
        
                    .RadTreeView .rtTop   
        
                    {  
        
                        white-space: nowrap !important;  
        
                    }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="scriptManager1" runat="server" /> 
        
                <div> 
        
                    <telerik:RadTreeView ID="RadTreeView1" runat="server" style="white-space: normal" Width="180px">  
        
                        <Nodes> 
        
                            <telerik:RadTreeNode Text="root node" Expanded="true">  
        
                                <Nodes> 
        
                                    <telerik:RadTreeNode ImageUrl="Document.gif"   
        
                                        Text="node 1 with long long long text" Expanded="True" > 
        
                                        <Nodes> 
        
                                            <telerik:RadTreeNode runat="server" ImageUrl="Document.gif"   
        
                                                Text="Money Bag Missing With Driver (PDF 61.4KB) ">  
        
                                            </telerik:RadTreeNode>   
        
                                            <telerik:RadTreeNode runat="server" ImageUrl="Document.gif"   
        
                                                Text="The Association Of Banks In Malaysia’s Public Hotline Is Three Months Old; Mediates Between Bank Users And Member Banks">  
        
                                            </telerik:RadTreeNode> 
        
                                        </Nodes> 
        
                                    </telerik:RadTreeNode> 
        
                                    <telerik:RadTreeNode ImageUrl="Document.gif" Text="Asia Needs Its Own Rating Agencies, Says Nazir (PDF 77.5KB) " /> 
        
                                    <telerik:RadTreeNode ImageUrl="Document.gif" Text="node 1 with long long long text" /> 
        
                                </Nodes> 
        
                            </telerik:RadTreeNode> 
        
                        </Nodes> 
        
                    </telerik:RadTreeView> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Yana

Admin

5044 posts

Posted 31 Jul 2009 Link to this post

Hello Paladin,

I am sorry, this is my mistake. Here are the correct styles:

    
            <style type="text/css"> 
        
                .RadTreeView  
        
                { 
        
                    overflow: visible !important; 
        
                } 
        
                .RadTreeView .rtImg 
        
                { 
        
                    vertical-align: top !important; 
        
                } 
        
                .RadTreeView .rtIn { 
        
                    display:inline-block !important; 
        
                    whitewhite-space:normal !important;  
        
                } 
        
                .RadTreeView .rtTop, 
        
                .RadTreeView .rtMid, 
        
                .RadTreeView .rtBot  
        
                { 
        
                    whitewhite-space: nowrap !important; 
        
                } 
        
            </style>

Regards,
Yana
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.

HSLaw

159 posts

Member since:
Jan 2006

Posted 02 Aug 2009 Link to this post

Hi,
I have updated the code http://www.ximnet.com.my/aspnet35/admin/test_treeview.aspx

It is now displaying perfectly in Firefox.
However, in Internet Explorer, the sub nodes is still having problem.
Is there a way to fix for IE ? Thanks.
Kamen Bundev
Admin

1532 posts

Posted 05 Aug 2009 Link to this post

Hi Paladin,

IE has trouble rendering inlaid elements with padding and keeping the icon and the text in one row. So to force that we will make the images absolute, the minus is that you will have to use an image for your root element to fill the gap. This is the CSS (replace the old one):
<style type="text/css">
    div.RadTreeView
    {
        overflow: visible !important;
    }
    div.RadTreeView .rtImg
    {
        vertical-align: top;
        position: absolute;
        margin: 3px 4px 0;
    }
    div.RadTreeView .rtUL .rtIn
    {
        display: inline-block;
        white-space: normal;
        padding: 1px 3px 2px 27px;
    }
    div.RadTreeView .rtHover .rtIn,
    div.RadTreeView .rtSelected .rtIn
    {
        padding: 0 2px 1px 26px;
    }
    div.RadTreeView .rtTop,
    div.RadTreeView .rtMid,
    div.RadTreeView .rtBot
    {
        white-space: nowrap;
    }
</style>
Let me know if this helps.

Greetings,
Kamen Bundev
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.
HSLaw

159 posts

Member since:
Jan 2006

Posted 05 Aug 2009 Link to this post

Thanks Kamen,
The tree now load perfectly.

However, this is the layout that we want to implement the tree: http://www.ximnet.com.my/aspnet35/admin/menu_test.aspx
If we scroll down the left pane, the icon will stay in its position. Is there a way to fix this ?
Kamen Bundev
Admin

1532 posts

Posted 06 Aug 2009 Link to this post

Hi Paladin,

Set a CssClass="relativePane" to the RadPane surrounding it and add this CSS:
.relativePane
{
position: relative;
}
Let me know if this helps.

Sincerely yours,
Kamen Bundev
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.
HSLaw

159 posts

Member since:
Jan 2006

Posted 06 Aug 2009 Link to this post

Thanks Kamen,

Here is our latest development : http://www.ximnet.com.my/aspnet35/admin/menu_test.aspx
In the left pane, I have the tree in a RadPageView which is inside a panelbar.
I set cssclass="relativePane" to the RadPageView.
The tree works perfectly in Firefox but not in IE.
Is there a way to fix this ?
Kamen Bundev
Admin

1532 posts

Posted 06 Aug 2009 Link to this post

Hello Paladin,

This happens due to position: relative bug in Standards mode in IE6/7. To fix it, you have to set position: relative to all scrolling containers - in your case the RadPane and .RadPanelBar .rpGroup class. Check this article for more info on this bug:
http://snook.ca/archives/html_and_css/position_relative_overflow_ie/

Best wishes,
Kamen Bundev
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.
HSLaw

159 posts

Member since:
Jan 2006

Posted 07 Aug 2009 Link to this post

Hi Kamen,
Thanks. It is almost perfect now : http://www.ximnet.com.my/aspnet35/admin/menu_test.aspx

but in IE, when I expand "About Us A", the folder icon for "01" is stucked as screencap below.
http://www.ximnet.com.my/aspnet35/admin/treeview%20icon%20stuck.png

Is there something I did wrong ?
Answer
Kamen Bundev
Admin

1532 posts

Posted 07 Aug 2009 Link to this post

Hello Paladin,

Looks like this is another representation of the same bug. Replace the CSS in you page with this one and it should be fixed:
html, body, form
{
    overflow: hidden;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
div.RadTreeView
{
    overflow: visible !important;
}
div.RadTreeView .rtImg
{
    vertical-align: top;
    position: absolute;
    margin: 3px 4px 0;
    z-index: 1;
}
.relativePane,
.RadPanelBar .rpGroup,
div.RadTreeView .rtUL,
div.RadTreeView .rtUL .rtLI
{
    position: relative;
}
div.RadTreeView .rtUL .rtIn
{
    display: inline-block;
    white-space: normal;
    padding: 1px 3px 2px 27px;
}
div.RadTreeView .rtHover .rtIn, div.RadTreeView .rtSelected .rtIn
{
    padding: 0 2px 1px 26px;
}
div.RadTreeView .rtTop, div.RadTreeView .rtMid, div.RadTreeView .rtBot
{
    white-space: nowrap;
    position: relative;
}

Best wishes,
Kamen Bundev
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.
HSLaw

159 posts

Member since:
Jan 2006

Posted 09 Aug 2009 Link to this post

Thanks a lot, Kamen
Moon

250 posts

Member since:
Apr 2008

Posted 12 Aug 2009 Link to this post

Warning to anyone snagging this final version... It's customized for this user, and it made my browser scrollbar entirely disappear. Use the second to the last version.

But I don't understand why in ajax's latest version, this isn't by default. Why do we have to add a style to "fix" this in the first place.

HSLaw

159 posts

Member since:
Jan 2006

Posted 12 Aug 2009 Link to this post

sorry about that,

the css part below is for my spitter:

    
            html, body, form  
        
            {  
        
                overflow: hidden;  
        
                height: 100%;  
        
                width: 100%;  
        
                margin: 0px;  
        
                padding: 0px;  
        
            }

Word wrap & icon issue

Yana

Yana

Kamen Bundev

Kamen Bundev

Kamen Bundev

Kamen Bundev

Moon