product caption

Demos

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

Run example in: C# VB.NET



Click here for a full window example.

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
    <html style="height:100%;margin:0px" >

  • make sure the <BODY> tag has its height set to 100% and its margin set to 0px
    <body style="height:100%;margin:0px" >

  • make sure any elements that are embedding the splitter control also has those properties set
    <form style="height:100%;margin:0px" >

  • 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 = "c#"   AutoEventWireup = "false"  % >  
< %@ Register  TagPrefix = "radSpl"   Namespace = "Telerik.WebControls" Assembly="RadSplitter" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
<html style="height:100%">  
    <head> 
        <title>FullWindow</title> 
    </head> 
    <body style="margin:0px;height:100%;overflow:hidden;" scroll="no">  
        <form id="Form1" method="post" runat="server" style="height:100%" > 
            <radspl:radsplitter id="MainSplitter" runat="server"   
                height="100%"   
                width="100%">  
                <radspl:radpane id="LeftPane" runat="server"   
                    Width="100px" 
                > 
                    <!-- Place the content of the pane here --> 
                </radspl:radpane> 
 
                <radspl:radsplitbar id="RadSplitBar1" runat="server" /> 
 
                <radspl:radpane id="MainPane" runat="server" > 
                    <!-- Place the content of the pane here --> 
                </radspl:radpane> 
            </radspl:radsplitter> 
        </form> 
    </body> 
</html> 
 

You can copy the provided code example in a blank aspx page and start building your custom splitter configuration.
Source Code & Description
 
Compatible with ASP.NET 1.x, 2.0 Optimized for Visual Studio 2003 and 2005 Accessibiliy Verified!Valid XHTML 1.1! AJAX enabled
Telerik Inc, 275 Grove Street, 4th Floor, Newton MA 02466, Contact Us
Copyright 2002-2007 ©telerik. All right reserved