How to get a section of a screen to resize with the window

2 posts, 0 answers
  1. Tonyz289
    Tonyz289  avatar
    50 posts
    Member since:
    Jun 2011

    Posted 14 Nov 2011 Link to this post

    I have a form (shown in the attachment) that has a fixed header and footer but the middle section should re-size with the browser window. How do is do this?

    The form is made is using the code bwlow:
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Sitefinity"
        <asp:Label ID="Label2" runat="server" ForeColor="Red">Loading... </asp:Label>
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Sitefinity">
    <telerik:RadSplitter ID="rsMain" runat="server" VisibleDuringInit="false" Width="100%" Height="100%"
        Orientation="Horizontal" EnableEmbeddedSkins="False" Skin="splitter_2">
        <telerik:RadPane ID="rpTop" runat="server" CssClass="ApplyOverflow" Height="50px"
            Width="100%" Scrolling="None">
        <telerik:RadPane ID="rpMiddle" runat="server" Height="800px" Width="100%" Scrolling="None">
            <telerik:RadSplitter ID="rsMiddle" runat="server" Width="100%" Height="100%" EnableEmbeddedSkins="False"
                <telerik:RadPane ID="rpMiddleLeft" runat="server" Width="20%" Height="100%" PersistScrollPosition="true">
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal">
                        <telerik:RadPane ID="rpMiddleLeftTop" runat="server">
                        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" Visible="true" />
                        <telerik:RadPane ID="rpMiddleLeftMiddle" runat="server" Height="45%"
                            Visible="true" PersistScrollPosition="true">
                        <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both">
                        <telerik:RadPane ID="rpMiddleLeftBottom" runat="server"  Height="10%">
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server"
                        CollapseMode="Forward" />
                <telerik:RadPane ID="rpMiddleRight" runat="server" Width="80%" Height="100%" PersistScrollPosition="true">
        <telerik:RadPane ID="rpBottom" runat="server" Height="20px" Width="100%" Scrolling="None">
            <div style="text-align: center; background-color: #f5be19;">
                Version 4, ip3 Copyright (c) 1999-2011 Intuitive Solutions Group Inc.</div>
        <telerik:RadPane ID="rpPlatform" runat="server" Visible="false">
  2. Dobromir
    Dobromir avatar
    1633 posts

    Posted 15 Nov 2011 Link to this post

    Hi Tony,

    If I understand you correctly, you want the middle part of the page to resize with the browser's window. To do so you should set the Height property of the header(rpTop) and footer(rpBottom) panes and leave the not set Height to the middle pane (rpMiddle). This will configure the middle pane as a "FreeSized", which means that it will be sized according to the remaining space inside the splitter. The same approach applies for the Width property of the panes of the vertically oriented splitter nested in the middle pane.

    For your convenience I have attached a sample page using the provided splitters' declaration, with the above modifications applied. In order to make the page runnable I have removed the custom skin registration to the splitters.

    Best wishes,
    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
Back to Top