Murali Karlapudi
Top achievements
Rank 2
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
0
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:
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
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