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

Raddock Resize Vertically

1 Answer 63 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Murali Karlapudi
Top achievements
Rank 2
Murali Karlapudi asked on 28 Jul 2010, 11:47 AM
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...?

1 Answer, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 29 Jul 2010, 02:59 PM
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
Tags
Dock
Asked by
Murali Karlapudi
Top achievements
Rank 2
Answers by
Pero
Telerik team
Share this question
or