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

[Solved] Setting Splitter Height

3 Answers 153 Views

Splitter

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

David asked on 26 Feb 2014, 08:29 PM

I have setup a simple vertical splitter. When I change the size of the browser window, the width of the splitter follows the width of the browser window as I intended.

How do I do the same with the height? I can set the height of the splitter to 100% but I am only permitted to set the height of each pane in pixels and not in %.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

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

</head>

<body>

<form id="form1" runat="server">

<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">

// Script here

</script>

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

</telerik:RadAjaxManager>

<div style="height:100%">

<telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%"

Skin="WebBlue" Width="100%" LiveResize="True">

<telerik:RadPane ID="RadPane1" Runat="server" Width="30%" Height="300px"

ContentUrl="http://activeminds.ca" Scrolling="None">

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" Runat="server">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPane2" Runat="server">

Test content

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

3 Answers, 1 is accepted

Accepted

answered on 03 Mar 2014, 01:07 PM

Hello David,

When you want a Splitter to take size in percentages, you have to make sure that all of its parent also have size configured in percentages (up to a parent with a fixed size). This includes the html, body and form elements - setting the following CSS will fix the issue with the provided configuration:

html, body, form

{

width:100%;

height:100%;

padding:0;

margin:0;

overflow:hidden;

}

You can find useful information on the subject in the following online resources:
    Filling the Entire Page
    Specifying Size
    Resize with Window

Kind 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 UI for ASP.NET AJAX, subscribe to the blog feed now.