Need Radsplitter to almost fill page

2 posts, 0 answers
  1. John
    John avatar
    33 posts
    Member since:
    Jun 2010

    Posted 04 Aug 2010 Link to this post

    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>
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 06 Aug 2010 Link to this post

    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
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top