Word wrap & icon issue

15 posts, 1 answers
  1. HSLaw
    HSLaw avatar
    153 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
  2. Yana
    Admin
    Yana avatar
    4554 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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. HSLaw
    HSLaw avatar
    153 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> 
     


  5. Yana
    Admin
    Yana avatar
    4554 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  
        { 
            overflowvisible !important; 
        } 
        .RadTreeView .rtImg 
        { 
            vertical-aligntop !important; 
        } 
        .RadTreeView .rtIn { 
            display:inline-block !important; 
            whitewhite-space:normal !important;  
        } 
        .RadTreeView .rtTop, 
        .RadTreeView .rtMid, 
        .RadTreeView .rtBot  
        { 
            whitewhite-spacenowrap !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.
  6. HSLaw
    HSLaw avatar
    153 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.
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    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.
  8. HSLaw
    HSLaw avatar
    153 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 ?





  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    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.
  10. HSLaw
    HSLaw avatar
    153 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 ?





  11. Kamen Bundev
    Admin
    Kamen Bundev avatar
    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.
  12. HSLaw
    HSLaw avatar
    153 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 ?
  13. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    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.
  14. HSLaw
    HSLaw avatar
    153 posts
    Member since:
    Jan 2006

    Posted 09 Aug 2009 Link to this post

    Thanks a lot, Kamen


  15. Moon
    Moon avatar
    249 posts
    Member since:
    Oct 2012

    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.

     

  16. HSLaw
    HSLaw avatar
    153 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;  
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017