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

Resizing with window

2 Answers 139 Views

Splitter

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

Charlie asked on 21 Jan 2014, 09:26 PM

I am a new user of Telerik tools and am trying to figure out how to build a simple web page with RadPanes using the RadSplitter tool. I have followed the online docs and am having trouble with the RadSplitter resizing with the window. When the browser window first comes up the RadSplitter and associated RadPanes are correctly sized to the window, but if you try to resize the window larger or smaller the RadSplitter does not resize with the window. Perhaps I am missing something, so here is the code that I have below.

Also wondering if it is possible to use a separate CSS file to handle the style of the RadPanes. It seems that when I set some of the style properties of the RadPanes, they do not show up.

And is it possible to use the HTML5 Doctype instead of the default XHTML 1.1 that is created with the Telerik Web App?

Thanks,
Charlie

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

<html style="height:100%">

<head runat="server">

<title>Telerik Real Estate Demo</title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body style="margin:0px;height:100%;overflow:hidden;">

<form id="form1" runat="server" style="height:100%;margin:0px;">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div id="header" style="border: solid 2px black;">

<h3>Telerik Real Estate Demo</h3>

</div>

<div id="mainPage" style="border: solid 2px black; width: 100%; height: 100%;">

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Height="100%" Width="100%">

<telerik:RadPane ID="topHalfRad" runat="server" BorderStyle="Solid" BorderWidth="2" BorderColor="#0033CC"

MinHeight="200" MinWidth="200" Scrolling="None" Width="800" Height="300">

<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical">

<telerik:RadPane ID="topLeftRad" runat="server" BorderColor="Lime" BorderStyle="Solid" BorderWidth="2"

MinHeight="200" MinWidth="200" Width="390">

Left Pane

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" />

<telerik:RadPane ID="topRightRad" runat="server" BorderColor="#CC00FF" BorderStyle="Solid" BorderWidth="2"

MinHeight="200" MinWidth="200" Width="390">

Right Pane

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both" />

<telerik:RadPane ID="botHalfRad" runat="server" BorderColor="#660033" BorderStyle="Solid" BorderWidth="2"

MinHeight="200" MinWidth="400" Width="800" Height="300">

Bottom Pane

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

2 Answers, 1 is accepted

Accepted

answered on 22 Jan 2014, 12:06 PM

Hi Charlie,

Yes, you can use HTML5 Doctype instead of the default XHTML 1.1, but you have to only make sure that the following xmlns value is added to the html tag:
<html xmlns="http://www.w3.org/1999/xhtml">

The main issue in the provided markup comes from the fact you are setting a fixed size to all RadPanes, which children to a resizable Splitter. In order for the Splitter to behave correctly in this scenario, you will need to leave t least one free sized RadPane in it, so the resizing of the browser window will be compensated with its size.

Note also, that when using horizontally oriented Splitter, the Width of its child RadPanes is always 100% of the Splitter's width. Respectivelly if the Splitter with vertical orientation its child RadPanes Height matches its own one.

Regarding the external CSS styles - you can assign a CSS class to each RadSplitter/RadPane by using its CccClass property. The reason why not all of the set styles are applied to the control is that not all of them are implemented in it, but only inherited. More information on the subject is available here: Implemented Inherited Properties

Additionally, in order to substitute the size of the heading from the 100% height o the Splitter, you will need to set the header size to the Splitters HeightOffset property.

Bellow you can see your code modified per the suggestions above:

<!DOCTYPE html>

<html style="height: 100%" xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Telerik Real Estate Demo</title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body style="margin: 0px; height: 100%; overflow: hidden;">

<form id="form1" runat="server" style="height: 100%; margin: 0px;">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div id="header" style="border: solid 2px black;">

<h3>Telerik Real Estate Demo</h3>

</div>

<div id="mainPage" style="border: solid 2px black; width: 100%; height: 100%;">

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Height="100%" Width="100%" HeightOffset="65" BackColor="Red">

<%--topLeftRad's MinWidth + topRightRad's MinWidth = 400px = RadSplitter2's MinWidth = topHalfRad's MinWidth, same abouth the minHeight --%>

<telerik:RadPane ID="topHalfRad" runat="server" MinHeight="200" MinWidth="400" Scrolling="None" Height="300">

<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical">

<telerik:RadPane ID="topLeftRad" runat="server" BorderColor="Lime" BorderStyle="Solid" BorderWidth="2" Width="390" MinWidth="200" MinHeight="200">

Left Pane

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" />

<telerik:RadPane ID="topRightRad" runat="server" BorderColor="#CC00FF" BorderStyle="Solid" BorderWidth="2" MinHeight="200" MinWidth="200">

Right Pane

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both" />

<telerik:RadPane ID="botHalfRad" runat="server" MinHeight="200" MinWidth="400">

Bottom Pane

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

I hope this helps.

Regards,
Veselina Raykova
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.