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

[Tonyz289]

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"
    MinDisplayTime="200">
    <asp:Label ID="Label2" runat="server" ForeColor="Red">Loading... </asp:Label>
</telerik:RadAjaxLoadingPanel>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Sitefinity">
</telerik:RadSkinManager>
<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>
    <telerik:RadPane ID="rpMiddle" runat="server" Height="800px" Width="100%" Scrolling="None">
        <telerik:RadSplitter ID="rsMiddle" runat="server" Width="100%" Height="100%" EnableEmbeddedSkins="False"
            Skin="splitter_2">
            <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:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" Visible="true" />
                    <telerik:RadPane ID="rpMiddleLeftMiddle" runat="server" Height="45%"
                        Visible="true" PersistScrollPosition="true">
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="rpMiddleLeftBottom" runat="server"  Height="10%">
                      </telerik:RadPane>
                </telerik:RadSplitter>
                </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server"
                    CollapseMode="Forward" />
            <telerik:RadPane ID="rpMiddleRight" runat="server" Width="80%" Height="100%" PersistScrollPosition="true">
            </telerik:RadPane>
        </telerik:RadSplitter></telerik:RadPane>
    <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>
    <telerik:RadPane ID="rpPlatform" runat="server" Visible="false">
    </telerik:RadPane>
</telerik:RadSplitter>

[Dobromir]

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