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

RadSplitter Height Issue

1 Answer 56 Views
This is a migrated thread and some comments may be shown as answers.
William Higgins
Top achievements
Rank 2
William Higgins asked on 01 Nov 2012, 09:28 PM
I believe I have read all of the post's in here about getting the height set so it fills the screen.  I have applied Height: 100% to all of the pieces of the splitter and I have also written some jQuery to help with the sizing issue.  All works fine in FireFox but not in IE (currently using IE 8).  Here is the HTML and the jQuery is below.

<div id="main" class='column last span-19'>
    <telerik:RadDockLayout ID="rdlSliders" runat="server" OnSaveDockLayout="rdlSliders_SaveDockLayout"
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="1252" OnClientLoaded="splitterLoaded" Height="100%">
            <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="None" Height="100%">
                <telerik:RadSlidingZone ID="SlidingZone1" runat="server"
                                        Width="22" Height="100%">
                    <telerik:RadSlidingPane ID="rspDefault1" Title="Landing Area" runat="server" Width="300px"
                                            OnClientResized="resizepane" OnClientExpanded="resizepane">
                        <telerik:RadDockZone ID="rdzCapacity" runat="server" Width="290px"
                                             UniqueName="Capacity" Height="100%">
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server"></telerik:RadSplitBar>
            <telerik:RadPane ID="MainPane" runat="server" Height="100%">
                <telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="99%" SelectedIndex="0" Height="100%">

$(document).ready(function () {
    var windowheight = $(window).height();
    $("RadSplitter1").height((windowheight - 136));
    $("#SlidingZone1").height((windowheight - 136));
    $("#MainPane").height((windowheight - 136));
    $("#rspDefault1").height((windowheight - 136));

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 05 Nov 2012, 03:10 PM
Hi William,

In order to make a Splitter occupy the whole height of a page you need to apply height of 100% to all of its parent elements (up to a parent with a fixed size), not its children.

Moreover, if you want to set the height of the Splitter (and/or its child elements) Client-side, it is highly recommended to access its client object and use the respective JavaScript methods (e.g. set_height()). 
<script type="text/javascript">
    Sys.Application.add_load(function () { //The recommended event to use
        var windowheight = $(window).height();
        $find("RadSplitter1").set_height((windowheight - 136));

For your convenience I have modified the code provided by you, so now it occupies the whole page. As well, if you want some pixels to be extracted from the Splitter's height, you need to use the Splitter's HeightOffset property to achieve it. Please, examine the project and let me know if you need any further assistance.

All the best,
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Asked by
William Higgins
Top achievements
Rank 2
Answers by
Telerik team
Share this question