Relative Height

9 posts, 0 answers
  1. Michael Ward
    Michael Ward avatar
    6 posts
    Member since:
    Jul 2006

    Posted 26 Mar 2009 Link to this post

    Hi,

    we are having trouble with a treeview we are using in a navigation panel.
    Since we need to support different client resolutions we have to use relative height for the control.
    But if we put the tree control into a div or table with relative height and don't give the tree a absolute height, the tree will overlay the next element, disregarding the height of the parent container (in any other browser than IE).
    We found a way to fix the height using javascript, but then the scroll position will not be retained.
    I will post a simple example below. The commented out javascript was a try to fix the height on resizing.
    What we need is a solution that will work with relative height, for all major browsers and will maintain the scroll position on expand.
    Any ideas would be appreciated.

    Cheers,
    Michael

    Aspx:
    <body onload="fixTreeHeights()" onresize="fixTreeHeights()"
        <form id="form1" runat="server"
            <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager> 
            <div id="wrapperDiv" style="height:50%;border:1px solid black;"
                <telerik:RadAjaxPanel ClientEvents-OnResponseEnd="fixTreeHeights()" ID="ajaxPanel" runat="server"
                    <telerik:RadTreeView style="overflow:auto;" 
                        OnNodeExpand="tree_NodeExpand" ID="tree" RetainScrollPosition="true" runat="server" Height="100%"
                    </telerik:RadTreeView> 
                </telerik:RadAjaxPanel> 
            </div> 
            <div style="height:50%;"
                Footer 
            </div> 
        </form> 
        <script type="text/javascript"
         
            function fixTreeHeights() { 
    //          var panelBar = document.getElementById("wrapperDiv"); 
    //          var documentdocumentTree = document.getElementById('<%= tree.ClientID %>'); 
     
    //          if (panelBar.offsetHeight > 0) { 
    //              var intCompensate = 0
    //              var documentdocumentObj = document.documentElement; 
    //              if ((window.opera) || (document.all && (!(document.compatMode && document.compatMode == "CSS1Compat")))) { 
    //                  documentdocumentObj = document.body; 
    //              } 
    //              documentTree.style.height = (parseInt(documentObj.clientHeight) - intCompensate) + "px"; 
    //              documentTree.style.width = (documentObj.clientWidth) + 'px'; 
    //              if (window.scrollDocumentTreeSelectedNode) scrollDocumentTreeSelectedNode(); 
    //          } 
            }     
        </script>  
    </body> 

    and the codebehind:

    protected void Page_Load(object sender, EventArgs e) 
            { 
                if(!IsPostBack) 
                { 
                    tree.Nodes.Clear(); 
                    for(var i = 0; i < 100; i++) 
                    { 
                        var node = new RadTreeNode 
                                       { 
                                           Text = "node" + i, 
                                           ExpandMode = TreeNodeExpandMode.ServerSide, 
                                           Expanded = false
                                            
                                       }; 
                        tree.Nodes.Add(node); 
                    } 
                } 
            } 
     
            protected void tree_NodeExpand(object sender, RadTreeNodeEventArgs e) 
            { 
                var node = new RadTreeNode {Text = "child", ExpandMode = TreeNodeExpandMode.ServerSide}; 
                e.Node.Nodes.Add(node); 
                e.Node.Expanded = true
                e.Node.ExpandMode = TreeNodeExpandMode.ClientSide; 
            } 
     
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 31 Mar 2009 Link to this post

    Hi Michael,

    I tested the code in IE7 and this fix didn't work at all - the page has 2 scrollbars and doesn't look good at all. Basically, you need the div containing the treeview to take 50% of the height of the page, is that right? Please confirm this and we'll try to find the best solution.

    Regards,
    Yana
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael Ward
    Michael Ward avatar
    6 posts
    Member since:
    Jul 2006

    Posted 31 Mar 2009 Link to this post

    Hi Yana,

    yes that's basically what we want. In our application we have a radpanelbar with a couple of fixed items and the treeview (in a wrapper div or table) above. The problem is that if we assign the wrapper div a relative height the tree will overlap.

    Thanks
    Michael
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 03 Apr 2009 Link to this post

    Hi Michael,

    We need some more time to find the best solution for this situation, You'll be informed once we're ready. Thank you for your patience.

    Kind regards,
    Yana
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  6. Oleg
    Oleg avatar
    1 posts
    Member since:
    May 2009

    Posted 21 May 2009 Link to this post

    Is it problem solved?
  7. Syed Danish
    Syed Danish avatar
    70 posts
    Member since:
    Dec 2009

    Posted 14 Dec 2009 Link to this post

    Hi Yana,

    We are using the Telerik Controls with the Composite Application Guidance for our application. We are unable to control the height of the controls. The control's height increase and decrease in size with different resolutions. We actually need to fix the control size according to the height of the parent container(i.e Region in the Composite Application Guidance)

    We need the Quick fix to this problem. Thanks in advance...

    Regards,
    Danish
  8. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 17 Dec 2009 Link to this post

    Hello Syed,

    Which controls exactly you're using? This forum is for RadControls for ASP.NET AJAX. 


    Regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  9. Hendrik
    Hendrik avatar
    8 posts
    Member since:
    Aug 2010

    Posted 22 Jul 2011 Link to this post

    Are there any news regarding the original problem: "tree will overlay the next element, disregarding the height of the parent container (in any other browser than IE)" ??

    Thanks in advance
    Hendrik
  10. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 28 Jul 2011 Link to this post

    Hello Hendrik,

    It seems like different browsers execute in different way the "Height" property set to percentage so we recommend setting it with pixels.

    We will forward this problem for developers to research again and if a solution is provided you will be informed.

    Greetings,
    Plamen Zdravkov
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017