[Solved] Need Radsplitter to almost fill page

[John]

Radsplitter will not take up even half the  height of page.   It is stuck at 400px in height, width is not affected.  I can make it smaller but not bigger.  I would like it ideally to fill 90% of the page.  The splitter has two panes, radlist in one pane and radeditor in the other.  Would like 90% of page width covered by rad splitter, and would like it to stay at that percentage even if the browser dimensions change.

Tried the splitter.resize(x,y) in client side script; again I can't get height over 400px, although I can make it smaller. 

Thank you all in advanced.

Attached is screen shot, and below is aspx file;

<%@ Page Title="NVSS Manuals - Edit" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Edit.aspx.cs" Inherits="NVSS_Manual.Edit" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>


<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">


    </style>

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
</telerik:RadScriptManager>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
</telerik:RadStyleSheetManager>

<telerik:RadSplitter ID="RadSplitter1" Runat="server" SplitBarsSize=""
    Width="100%" Height="100%" ResizeMode="Proportional" FullScreenMode="True"
        LiveResize="True" VisibleDuringInit="False">
   <telerik:RadPane ID="RadPane1" Runat="server" Width="20%" Height="100%" >
       <telerik:RadListBox ID="RadListBox1" runat="server" AllowReorder="True"
           AutoPostBack="True" Height="90%"
           onselectedindexchanged="lbManualIndex_SelectedIndexChanged"
           Sort="Ascending" Width="99%"
           AllowDelete="True" AutoPostBackOnDelete="True"
           ondeleted="RadListBox1_Deleted">
       </telerik:RadListBox>
       <telerik:RadTextBox ID="RadTextBox1" Runat="server" Width="50%">
       </telerik:RadTextBox>
       <asp:Button ID="btnAdd" runat="server" onclick="Add_Click" Text="Add" />
    </telerik:RadPane>
   <telerik:RadSplitBar ID="RadSplitBar1" Runat="server" CollapseMode="Forward" ></telerik:RadSplitBar>
   <telerik:RadPane ID="RadPane2" Runat="server" Width="80%" Height="100%"
        Scrolling="None">
       <telerik:RadEditor ID="RadEditor1" Runat="server" BackColor="White"
           ForeColor="White" Height="95%" Width="98%" BorderColor="Black"
           ontextchanged="RadEditor_TextChanged" OnClientLoad="OnClientLoad"><Content>
           </Content><CssFiles><telerik:EditorCssFile Value="~/Assets/Styles/RadEditorOverrides.css" /></CssFiles><CssClasses><telerik:EditorCssClass Name="redtext" Value=".redtext" /><telerik:EditorCssClass Name="Section 1." Value=".MajorHeading_1_Dot" /><telerik:EditorCssClass Name="Part 1.A" Value=".MajorHeading_1_Dot_A" /><telerik:EditorCssClass Name="Main Topic 1.A.1" Value=".MajorHeading_1_Dot_A_Dot_1" /><telerik:EditorCssClass Name="Sub topic 1.A.1.a" Value=".MajorHeading_1_Dot_A_Dot_1_Dot_a" /><telerik:EditorCssClass Name="First Subdivision 1.A.1.a.(1)" Value=".MajorHeading_1_Dot_A_Dot_1_Dot_a_Dot_1" /><telerik:EditorCssClass Name="Second Subdivision 1.A.1.a.(1).(i)" Value=".MajorHeading_1_Dot_A_Dot_1_Dot_a_Dot_1_Dot_i" /></CssClasses></telerik:RadEditor></telerik:RadPane>
</telerik:RadSplitter>

    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadEditor1">
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
<script type="text/javascript">
    function ResizeSpliterHeight() {
        alert("<%= RadSplitter1.ClientID %>");
        var splitter = $find("<%= RadSplitter1.ClientID %>");
    }
    function OnClientLoad(editor, args) {
        editor.attachEventHandler("onkeydown", function (e) {
            //alert("Content area key down " + e.keyCode);
            //debugger
           //if (e.keyCode == 50) {
           //     SetCookie('SaveTheEditorFlag', 'true', 1);
           // }
        });
       // ResizeSpliterHeight();
    }
    function SetCookie(cookieName,cookieValue,nDays) {
       var today = new Date();
       var expire = new Date();
       if (nDays==null || nDays==0) nDays=1;
       expire.setTime(today.getTime() + 3600000*24*nDays);
       document.cookie = cookieName+"="+escape(cookieValue)
           + ";expires="+expire.toGMTString();
}


</script>

</asp:Content>

[Dobromir]

Hi John,

I already answered your support ticket on the subject. For convenience I will paste my answer here as well.

When you have the RadSplitter configured in percentages, all its parent elements including the body, form and html should have their size explicitly set either in percentages or pixels in order to let the splitter calculate the size it should take.

This being said, you will get the desired behavior by adding the following style to your page:

<style type="text/css">
    html, body, form
    {
      height: 100%;
      margin: 0;
      padding: 0;
    }
</style>

and also set 100% height to the parent wrapper DIV.

Also, in scenarios where you have a header and / or a footer which are outside the splitter you need to set HeightOffset property to RadSplitter with value matching the combined size of the elements. You can find more information on how to configure RadSplitter with 100% height with margins in the following KB article:
RadSplitter which is 100% of the page and has margin applied

I hope this helps.


Kind regards,
Dobromir
the Telerik team