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

[Solved] AspPanel inside RadDock and RadDock inside RadSplitter = Layout Bug?

1 Answer 119 Views

Splitter

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

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
                <script type="text/javascript">  
        
                    //Q3 2008 official fix on splitter  
        
                    function OnSplitterClientLoaded(sender, args) {  
        
                        sender.get_element().style.visibility = 'inherit';  
        
                    }  
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <div> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                    </telerik:RadScriptManager> 
        
                    <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%">  
        
                                        <ContentTemplate> 
        
                                            <asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%">  
        
                                                <p> 
        
                                                    TEXT  
        
                                                </p> 
        
                                                <p> 
        
                                                    TEXT  
        
                                                </p> 
        
                                                <p> 
        
                                                    TEXT  
        
                                                </p> 
        
                                                <p> 
        
                                                    TEXT  
        
                                                </p> 
        
                                            </asp:Panel> 
        
                                        </ContentTemplate> 
        
                                    </telerik:RadDock> 
        
                                </telerik:RadDockZone> 
        
                            </telerik:RadDockLayout> 
        
                        </telerik:RadPane> 
        
                    </telerik:RadSplitter> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

1 Answer, 1 is accepted

Accepted

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:

quote:
"<percentage>
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,

Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.