RadSplitter Height issue?

3 posts, 1 answers
  1. Fusion Outsourcing Software Pvt. Ltd.
    Fusion Outsourcing Software Pvt. Ltd. avatar
    16 posts
    Member since:
    Apr 2009

    Posted 04 Jun 2009 Link to this post

    Hello Telerik Team,

    I am facing a problem with Nested Splitters.My Application not Occupying the whole Browser window height(100%) in IE7.0. I have pasted the css, & aspx Code snippet below.
    Please Guide us how to attain the full browser window height.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!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>CRM</title> 
        <link href="CSS/crmstyles.css" rel="stylesheet" type="text/css" /> 
        <link href="Telerik/RadSplitter/SampleSpliter/Splitter.SampleSpliter.css" rel="stylesheet" 
            type="text/css" /> 
    </head> 
    <body> 
        <form runat="server" id="frmCRM" style="height: 100%">  
        <div id="wrapper">  
            <telerik:RadAjaxManager runat="server" ID="ajax_manager">  
            </telerik:RadAjaxManager> 
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            </telerik:RadScriptManager> 
            <div id="content">  
                <telerik:RadSplitter ID="RadSplitter1" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                    Width="100%" Orientation="Horizontal" Skin="SampleSpliter" EnableEmbeddedSkins="false" 
                    ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                    BorderSize="0" BorderStyle="None" BorderWidth="0px" FullScreenMode="false">  
                    <telerik:RadPane ID="RadPane1" Scrolling="None" runat="server" Width="98%" Height="30%" 
                        BackColor="#A6DBFF" BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                        Vipin  
                    </telerik:RadPane> 
                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Width="100%" /> 
                    <telerik:RadPane ID="RadPane2" Scrolling="None" runat="server" Width="98%" Height="100%" 
                        BackColor="#ff0000" BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                        <telerik:RadSplitter ID="RadSplitter2" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                            Width="100%" Orientation="Vertical" Skin="SampleSpliter" EnableEmbeddedSkins="false" 
                            ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                            BorderSize="0" BorderStyle="None" BorderWidth="0px">  
                            <telerik:RadPane ID="RadPane3" Scrolling="None" runat="server" Width="16%" Height="100%" 
                                BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                            </telerik:RadPane> 
                            <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" Width="20px" 
                                Height="100%" /> 
                            <telerik:RadPane ID="RadPane4" Scrolling="None" runat="server" Width="26%" Height="100%" 
                                BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                            </telerik:RadPane> 
                            <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both" Width="20px" 
                                Height="100%" /> 
                            <telerik:RadPane ID="RadPane5" Scrolling="None" runat="server" Width="58%" Height="100%" 
                                BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                            </telerik:RadPane> 
                            <telerik:RadSplitBar ID="RadSplitBar4" runat="server" CollapseMode="Forward" Width="20px" 
                                Height="100%" /> 
                        </telerik:RadSplitter> 
                    </telerik:RadPane> 
                </telerik:RadSplitter></div>  
            <div id="footer">  
            </div> 
        </div> 
        </form> 
    </body> 
    </html> 
     
    // CSS  
    html, body {  
        font-family: sans-serif, serif, "Trebuchet MS", Verdana;  
        font-size: 11px;  
        font-weight: normal;  
        color: #000000;  
        text-decoration: none;  
        line-height: 18px;  
        margin: 0px;  
        padding: 0px;  
        height: 100%;  
    }  
    #wrapper {  
        padding: 0px;  
        width: 99%;  
        margin-top: 0px;  
        margin-right: auto;  
        margin-bottom: 0px;  
        margin-left: 0px;  
        height: 99%;  
        position: absolute;  
        clip: rect(0px,auto,auto,0px);  
        background-color: #f8f8f8;  
    }  
    #header {  
        margin: 0px;  
        padding: 0px;  
        float: left;  
        width: 100%;  
        height: 15%;  
        border: 1px solid #A6DBFF;  
        background-color: #A6DBFF;  
    }  
    #content {  
        margin: 0px;  
        padding: 0px;  
        float: left;  
        width: 100%;  
        border-right-width: 1px;  
        border-left-width: 1px;  
        border-right-style: solid;  
        border-left-style: solid;  
        border-right-color: #A6DBFF;  
        border-left-color: #A6DBFF;  
        border-bottom-width: 1px;  
        border-bottom-style: solid;  
        border-bottom-color: #A6DBFF;  
        height: 98%;  
    }  
    #content #leftcolumn {  
        margin: 0px;  
        float: left;  
        width: 15%;  
        padding-top: 0px;  
        padding-right: 0px;  
        padding-bottom: 1%;  
        padding-left: 0px;  
    }  
    #content #centrecolumn {  
        margin: 0px;  
        float: left;  
        width: 26%;  
        border-right-width: 1px;  
        border-right-style: solid;  
        border-right-color: #A6DBFF;  
        padding-top: 0px;  
        padding-right: 0px;  
        padding-bottom: 1%;  
        padding-left: 0px;  
        height: 98%;  
        border-left-width: 1px;  
        border-left-style: solid;  
        border-left-color: #A6DBFF;  
    }  
     
    #content #rightcolumn {  
        margin: 0px;  
        float: left;  
        width: 48%;  
        padding-top: 0px;  
        padding-right: 0px;  
        padding-bottom: 1%;  
        padding-left: 0px;  
        height: 98%;  
    }  
    #footer {  
        margin: 0px;  
        padding: 0px;  
        clear: both;  
        height: 2%;  
        border-right-width: 1px;  
        border-bottom-width: 1px;  
        border-left-width: 1px;  
        border-right-style: solid;  
        border-bottom-style: solid;  
        border-left-style: solid;  
        border-right-color: #A6DBFF;  
        border-bottom-color: #A6DBFF;  
        border-left-color: #A6DBFF;  
        width: 100%;  
        font-size: 10px;  
        background-color: #A6DBFF;  
    }  
    #content .top {  
        margin: 0px;  
        padding: 0px;  
        float: left;  
        height: 100%;  
        width: 100%;  
        border-bottom-width: 1px;  
        border-bottom-style: solid;  
        border-bottom-color: #A6DBFF;  
    }  
    #content .bottom {  
        margin: 0px;  
        padding: 0px;  
        float: left;  
        height: 100%;  
        width: 100%;  
    }  
     
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Jun 2009 Link to this post

    Hi Fusion,

    In order to get the desired result, you should explicitly set Height=100% to the RadSplitter which is the outermost one as shown below:


     <telerik:RadSplitter ID="RadSplitter1" runat="server" LiveResize="true" ResizeMode="AdjacentPane"    
                    Width="100%" Height="100%" 
     
     
    ............................................................. 

    I also recommend to set height 100% , margin 0 and padding 0 to the <form> element as well as for the <html> and <body> as shown below:

    html, body, form {     
        font-familysans-serifserif"Trebuchet MS"Verdana;     
        font-size11px;     
        font-weightnormal;     
        color#000000;     
        text-decorationnone;     
        line-height18px;     
        margin0px;     
        padding0px;     
        height: 100%;     
    }     
     


    Kind regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Fusion Outsourcing Software Pvt. Ltd.
    Fusion Outsourcing Software Pvt. Ltd. avatar
    16 posts
    Member since:
    Apr 2009

    Posted 06 Jun 2009 Link to this post

    Thank You,

    For now my Problem is solved. Your Work around solved my problem.

    Chinmay Sharma.
Back to Top