This is a migrated thread and some comments may be shown as answers.

AspPanel inside RadDock and RadDock inside RadSplitter = Layout Bug?

1 Answer 73 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Wei asked on 08 Dec 2008, 03:29 PM
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%">  

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 09 Dec 2008, 12:41 PM

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.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question