RadSplitter Height Issue

[William Higgins]

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.

HTML

<div id="main" class='column last span-19'>
    <telerik:RadDockLayout ID="rdlSliders" runat="server" OnSaveDockLayout="rdlSliders_SaveDockLayout"
                           OnLoadDockLayout="rdlSliders_LoadDockLayout">
        <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:RadDockZone>
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
            <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%">
                </telerik:RadMultiPage>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadDockLayout>
</div>

jQuery

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

[Vessy]

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));
    });
</script>

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,
Vesi
the Telerik team