Splitter - Resize with Window

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadSplitter allows to be resized with the resize of the window. This is possible when the Width or Height (or both Width and Height) properties are defined in percents.

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

  • Make sure the <HTML> and <BODY> elements have height set to 100% and 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" >

You can disable the resizing of the control with the window by setting the ResizeWithBrowserWindow to false.

  • DefaultCS.aspx
    • DefaultCS.aspx
    • FullWindow.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • FullWindow.aspx.cs
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Splitter.ResizeWithWindow.DefaultCS"  %>

<!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>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <a href="FullWindow.aspx">Click here for a full window example</a>.
    
    <div class="demo-container" id="windowWrapper" style="height:700px">
        <telerik:RadWindow RenderMode="Lightweight" ID="SplitterWindow" runat="server" VisibleOnPageLoad="true" Behaviors="Resize, Move" 
            Width="795px" Height="600px" RestrictionZoneID="windowWrapper">
        </telerik:RadWindow>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?