Browser Window Resizing

4 posts, 0 answers
  1. Ben
    Ben avatar
    7 posts
    Member since:
    Aug 2008

    Posted 21 Aug 2008 Link to this post

    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>
  2. Christian
    Christian avatar
    37 posts
    Member since:
    Oct 2007

    Posted 21 Aug 2008 Link to this post

    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

  3. Ben
    Ben avatar
    7 posts
    Member since:
    Aug 2008

    Posted 21 Aug 2008 Link to this post

    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.
  4. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 25 Aug 2008 Link to this post

    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.
Back to Top