This is a migrated thread and some comments may be shown as answers.

Browser Window Resizing

3 Answers 102 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Ben
Top achievements
Rank 1
Ben asked on 21 Aug 2008, 01:58 PM
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>

3 Answers, 1 is accepted

Sort by
0
Christian
Top achievements
Rank 1
answered on 21 Aug 2008, 02:21 PM
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

0
Ben
Top achievements
Rank 1
answered on 21 Aug 2008, 02:39 PM
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.
0
Tsvetie
Telerik team
answered on 25 Aug 2008, 07:52 AM
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.
Tags
Splitter
Asked by
Ben
Top achievements
Rank 1
Answers by
Christian
Top achievements
Rank 1
Ben
Top achievements
Rank 1
Tsvetie
Telerik team
Share this question
or