Raddock Resize Vertically

2 posts, 0 answers
  1. Murali Karlapudi
    Murali Karlapudi avatar
    7 posts
    Member since:
    Jun 2009

    Posted 28 Jul 2010 Link to this post

    Hello ...Is there a way to have the docking panels dynamically resize when the browser window is resized (both horizontally and   vertically)? I got this done horizontally... but how vertically...?
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 29 Jul 2010 Link to this post

    Hello Murali,

    Please note that the RadDock control is designed for fixed layout and its dimensions should be specified in pixels. However, in your case setting the Height in percentage values will be the easier way to achieve the desired behavior. Pasted below you will find an example that has two docks, one with DockMode="Docked" and the other with DockMode="Floating". Both docks resize their height when the browser window is resized.
    Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            html, body, form
            {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableCdn="true">
            <CdnSettings TelerikCdn="Enabled" />
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <div style="width: 100%; height: 100%;">
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"
                    Height="95%">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                        DockMode="Docked" Height="30%">
                        <ContentTemplate>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
            <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px"
                DockMode="Floating" Height="30%" Top="30%" Left="600px">
                <ContentTemplate>
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    CONTENT
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                </ContentTemplate>
            </telerik:RadDock>
        </div>
        </form>
    </body>
    </html>

    The key points in the code are highlighted in yellow. The <html/>, <body/> and <form/> should have width and height of 100% in order for the dock's height to be adjusted relatively to the height of the browser winwod. All parent elements of the dock should have their height in percent in order for the dock to be resized when the browser window is resized.

    Sincerely yours,
    Pero
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top