2008 (release history)

Resize With Window (Width,Height set to 100%)

Run example in: C# VB.NET

A common scenario in the use of RadSplitter control is when its Width and Height properties are set to 100% - you need a complete page layout control from the splitter.

If you have problems to resize the splitter in a full page height here is the following checklist:

make sure the <HTML> tag has its height set to 100% and its margin set to 0px
make sure the <BODY> tag has its height set to 100% and its margin set to 0px
make sure any elements that are embedding the splitter control also has those properties set
<div id="ParentDivElement" style="height: 100%;">
Optionally in order your page to be standards compliant you can set the DOCTYPE directive to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
Optionally you can also remove the page scrollbars so the application is as close to the desktop environment as possible:
<body scroll="no" >

Here is a cross-browser compatible code example of a page that contains a splitter control which is filling the entire page size:

    
            <%@ Page Language="VB" AutoEventWireup="true" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>FullWindow</title> 
        
                <style type="text/css">  
        
                html, body, form  
        
                {  
        
                   height: 100%;  
        
                   margin: 0px;  
        
                   padding: 0px;  
        
                   overflow: hidden;  
        
                }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form2" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager" runat="server" /> 
        
                    <div id="ParentDivElement" style="height: 100%;">  
        
                        <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" 
        
                            Orientation="Horizontal" Skin="Outlook">  
        
                            <telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150" 
        
                                Scrolling="none">  
        
                                <!-- Place the content of the pane here --> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" /> 
        
                            <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">  
        
                                <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook" LiveResize="true">  
        
                                    <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">  
        
                                        <!-- Place the content of the pane here --> 
        
                                    </telerik:RadPane> 
        
                                    <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" /> 
        
                                    <telerik:RadPane ID="ContentPane" runat="server">  
        
                                        <!-- Place the content of the pane here --> 
        
                                    </telerik:RadPane> 
        
                                </telerik:RadSplitter> 
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

You can copy the provided code example in a blank aspx page and start building your custom splitter configuration.

Example Source Code & Description

Telerik Inc, 275 Grove Street, 4th Floor, Newton MA 02466