Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Word wrap & icon issue

14 Answers 203 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
HSLaw
Top achievements
Rank 1
HSLaw asked on 29 Jul 2009, 09:20 AM
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

14 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 30 Jul 2009, 08:26 AM
treeviewwrap.zip
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.
0
HSLaw
Top achievements
Rank 1
answered on 30 Jul 2009, 09:29 AM
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> 
 


0
Yana
Telerik team
answered on 31 Jul 2009, 01:33 PM
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.
0
HSLaw
Top achievements
Rank 1
answered on 03 Aug 2009, 03:09 AM
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.
0
Kamen Bundev
Telerik team
answered on 05 Aug 2009, 04:09 PM
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.
0
HSLaw
Top achievements
Rank 1
answered on 06 Aug 2009, 02:35 AM
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 ?





0
Kamen Bundev
Telerik team
answered on 06 Aug 2009, 09:21 AM
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.
0
HSLaw
Top achievements
Rank 1
answered on 06 Aug 2009, 11:02 AM
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 ?





0
Kamen Bundev
Telerik team
answered on 06 Aug 2009, 01:10 PM
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.
0
HSLaw
Top achievements
Rank 1
answered on 07 Aug 2009, 09:56 AM
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 ?
0
Accepted
Kamen Bundev
Telerik team
answered on 07 Aug 2009, 01:50 PM
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.
0
HSLaw
Top achievements
Rank 1
answered on 10 Aug 2009, 03:21 AM
Thanks a lot, Kamen


0
Moon
Top achievements
Rank 2
answered on 12 Aug 2009, 07:12 PM

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.

 

0
HSLaw
Top achievements
Rank 1
answered on 13 Aug 2009, 01:27 AM
sorry about that,

the css part below is for my spitter:
html, body, form  
{  
    overflow: hidden;  
    height: 100%;  
    width: 100%;  
    margin: 0px;  
    padding: 0px;  
} 
Tags
TreeView
Asked by
HSLaw
Top achievements
Rank 1
Answers by
Yana
Telerik team
HSLaw
Top achievements
Rank 1
Kamen Bundev
Telerik team
Moon
Top achievements
Rank 2
Share this question
or