Browser Window Resizing

[Ben]

I'm trying to get my splitter to resize when the browser window resizes but having no luck so far.  Below is the code.  Thanks


<div style="width:90%; text-align:center;">
       
        <cc1:RadSplitter ID="OuterSplitter" runat="server" Skin="Gray" Width="100%" Height="100%" ResizeWithBrowserWindow="true" ResizeWithParentPane="true" ResizeMode="Proportional" Orientation="Horizontal">
                       
            <cc1:RadPane ID="rPaneTop" runat="server" Width="100%" Height="350" >
           
                <cc1:RadSplitter ID="MainSplitter" runat="server" Skin="Gray" Width="100%" Height="100%" ResizeWithBrowserWindow="true" ResizeWithParentPane="true" ResizeMode="Proportional" Orientation="Vertical">
                <cc1:RadPane ID="rPaneLeft" runat="server" Width="25%">

                    Top Left

                </cc1:RadPane>
                <cc1:RadSplitBar ID="SplitBar" runat="server" CollapseMode="Forward" SkinID="Gray" />
                <cc1:RadPane ID="rPaneMiddle" runat="server" Width="75%" >
                    Top Right
                </cc1:RadPane>
            </cc1:RadSplitter>
           
            </cc1:RadPane>
       
            <cc1:RadSplitBar ID="LowerSplitBar" runat="server" CollapseMode="Forward" SkinID="Gray" Width="100%"  />
            <cc1:RadPane ID="rPaneBottom" runat="server" Width="100%" Height="350px">
                Bottom Pane
            </cc1:RadPane>
           
       
        </cc1:RadSplitter>
</div>

[Christian]

Hi Ben,
have you set the style for html, body and form elements:
http://www.telerik.com/help/aspnet-ajax/splitter_layoutfillingpage.html

hth
Christian

[Ben]

Thanks for the example, however, I don't want fill the entire page with the splitter.  I'm trying to get the width to dynamically resize when the browser width is resized.  Also, this splitter is part of a content page that has a master page.  Since the html, body and form elements are part of the master page, the suggested changes would affect all content pages.  As a note the resizing seems to work if there is only one splitter insteaded of a nested splitter.

thanks for you help.

[Tsvetie]

Hi Ben,
The way you have configured the RadSplitter (Width=100%, Height=100%), means that the RadSplitter should become 100% of its parent's width and height. That is why, I would recommend that you remove the RadSplitter and set background-color for its parent DIV element:

<div style="width:90%; text-align:center;background-color:red;">text</div>

Now, when you open the page in the browser, you will notice how wide and high your DIV is. Adding a RadSplitter with Width=100%, Height=100%, would cause the splitter to become exactly as wide and as high as this DIV.

In case you have a parent splitter, you will have to set ResizeWithParentPane=false for this child splitter. By default, this property is set to "true" and a nested splitter becomes as wide and as high as its parent RadPane and resizes with it.

Sincerely yours,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.