Splitter Height Auto-Fill

2 posts, 0 answers
  1. David Beck
    David Beck avatar
    38 posts
    Member since:
    Jun 2010

    Posted 07 May 2010 Link to this post

    I amd having two issues.

    I have a Header above the Splitter and cant seem to get the Splitter to fill the rest of the Page. I even set it to 100% but what it does it sets itself to 100% of the Page without adjusting for a Header or Footer

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <%@ Register Src="~/UserControls/MainMenu.ascx" TagPrefix="BEX" TagName="Menu" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Bex Express Secure Transfer</title> 
        <meta name="Description" content="BEST, Bex Express Secure Transfer, is a Secure alternative to File Transfer Protocol (FTP) and is easy to use and web-based." /> 
        <meta name="Keywords" content="FTP, File Transfer Protocol, FTPS, SFTP, Secure File Transfer, Secure File Email, Secure File Send, BEST, Bex Express" /> 
        <link href="css/main.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        </telerik:RadScriptManager> 
        <div class="mainHeader">  
            <div class="mainLogo">  
                <img src="images/header.gif" alt="BEX Express" height="70" /> 
            </div> 
            <div class="mainMenu">  
                <BEX:Menu runat="server" /> 
            </div> 
        </div> 
        <div class="mainContent">  
            <telerik:RadSplitter ID="MainSplitter" runat="server" Skin="Vista" Width="100%" Height="100%" BorderSize="0">  
                <telerik:RadPane ID="LeftPane" runat="server" Width="25%">  
                    left  
                </telerik:RadPane> 
                <%--<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both">  
                </telerik:RadSplitBar>--%> 
                <telerik:RadPane ID="RightPane" runat="server" ContentUrl="http://www.google.com">  
                    right  
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </div> 
        </form> 
    </body> 
    </html> 
     
    body, form, html  
    {  
        height:100%;  
        width:100%;  
        background-color#6b89af;  
        padding0px 0px 0px 0px;  
        margin0px 0px 0px 0px;  
    }  
     
    .mainBody  
    {  
        width:800px;  
        margin-leftauto;   
        margin-right:auto;   
    }  
     
    .mainHeader  
    {  
        margin-leftauto;   
        margin-right:auto;   
        width:800px;  
        border-spacing0px;  
        padding0px 0px 0px 0px;  
    }  
     
    .mainLogo  
    {  
        height70px;  
    }  
     
    .mainMenu  
    {   
    }  
     
    .mainContent  
    {  
        marginauto;   
        width:800px;  
        heightauto !important;  
        border-spacing0px;  
        padding0px 0px 0px 0px;  
    }  
     
     


    I have attached a screenshot. As you can see the Splitter forces IE to have a Scroll bar.
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 10 May 2010 Link to this post

    Hello Loren,

    In the common case what you need to achieve can be done by using a script which calculates the size of the viewport minus the sum height of the header and the footer. The RadSplitter, however, provides a property called HeightOffset - please configure your splitter to occupy 100% of the page and set the mentioned property to the sum of the heights of the header and footer and everything should start working as expected no matter the screen resolution. You can find more detailed explanations and a sample demo attached in the article below:

    http://www.telerik.com/support/kb/aspnet-ajax/splitter/making-radsplitter-occupy-part-of-a-page-with-variable-size.aspx


    Best wishes,
    Svetlina
    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