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

Need Radsplitter to almost fill page

1 Answer 76 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
John asked on 04 Aug 2010, 04:40 PM
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">
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
<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%"
           Sort="Ascending" Width="99%"
           AllowDelete="True" AutoPostBackOnDelete="True"
       <telerik:RadTextBox ID="RadTextBox1" Runat="server" Width="50%">
       <asp:Button ID="btnAdd" runat="server" onclick="Add_Click" Text="Add" />
   <telerik:RadSplitBar ID="RadSplitBar1" Runat="server" CollapseMode="Forward" ></telerik:RadSplitBar>
   <telerik:RadPane ID="RadPane2" Runat="server" Width="80%" Height="100%"
       <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:RadAjaxManager runat="server">
            <telerik:AjaxSetting AjaxControlID="RadEditor1">
<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);
           //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();

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 06 Aug 2010, 08:44 AM
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;  
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,
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question