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

[Solved] Splitter Height Auto-Fill

1 Answer 157 Views

Splitter

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

David Beck asked on 07 May 2010, 06:47 PM

capture.PNG

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;  
        
                padding: 0px 0px 0px 0px;  
        
                margin: 0px 0px 0px 0px;  
        
            }  
        
            .mainBody  
        
            {  
        
                width:800px;  
        
                margin-left: auto;   
        
                margin-right:auto;   
        
            }  
        
            .mainHeader  
        
            {  
        
                margin-left: auto;   
        
                margin-right:auto;   
        
                width:800px;  
        
                border-spacing: 0px;  
        
                padding: 0px 0px 0px 0px;  
        
            }  
        
            .mainLogo  
        
            {  
        
                height: 70px;  
        
            }  
        
            .mainMenu  
        
            {   
        
            }  
        
            .mainContent  
        
            {  
        
                margin: auto;   
        
                width:800px;  
        
                height: auto !important;  
        
                border-spacing: 0px;  
        
                padding: 0px 0px 0px 0px;  
        
            }

I have attached a screenshot. As you can see the Splitter forces IE to have a Scroll bar.

1 Answer, 1 is accepted

answered on 10 May 2010, 11:43 AM

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.