RadSplitter Height Issue

2 posts, 0 answers
  1. William Higgins
    William Higgins avatar
    8 posts
    Member since:
    Jul 2009

    Posted 01 Nov 2012 Link to this post

    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));
    });
  2. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 05 Nov 2012 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top