AspPanel inside RadDock and RadDock inside RadSplitter = Layout Bug?

2 posts, 1 answers
  1. Wei
    Wei avatar
    33 posts
    Member since:
    Oct 2008

    Posted 08 Dec 2008 Link to this post

    This weird problem already troubled me 2 weeks. Following code does not work in FireFox (blank page), and even though it worked in IE the splitter height was not 100%, and the X/Y scroll bar was visible in situation that it should not displayed!

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="test" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
    <html xmlns="">  
    <head runat="server">  
        <script type="text/javascript">  
            //Q3 2008 official fix on splitter  
            function OnSplitterClientLoaded(sender, args) {  
                sender.get_element().style.visibility = 'inherit';  
        <form id="form1" runat="server">  
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            <telerik:RadSplitter ID="uxUCSplitterO" runat="server" VisibleDuringInit="False" 
                OnClientLoaded="OnSplitterClientLoaded" BorderSize="0" Width="100%" Height="100%">  
                <telerik:RadPane ID="uxUCPaneMT" runat="server" Height="100%" Width="100%" Scrolling="None">  
                    <telerik:RadDockLayout ID="uxUCDockLayoutMRH" runat="server" Skin="Office2007">  
                        <telerik:RadDockZone ID="uxUCDockZoneMTR" runat="server" Height="100%" Width="100%" 
                            BorderStyle="None" BorderWidth="0">  
                            <telerik:RadDock ID="uxUCDockMTR" runat="server" EnableDrag="false" Height="100%">  
                                    <asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%">  

  2. Answer
    Tsvetie avatar
    1517 posts

    Posted 09 Dec 2008 Link to this post

    Hello Wei,
    You have not cofigured the RadSplitter correctly to occupy 100% of the Height of its parent because that parent does not have specified height. Thus you break the following rule:

    If a web page element has its height defined in percent, its parent element must have a height style as well. The rule applies recursively.

    You can read about this rule on the W3 site:

    Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. "

    You can refer to this online article for information as well.

    Kind regards,

    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. DevCraft R3 2016 release webinar banner
Back to Top