I am using tables. I have 2 colunms 1 80% width of the page and another 20% of the page. The dockzone in the 20% of the page holds the docks and the main is for viewing the docks. The main area is blank (All though a picture os something that say drag stuff here would be nice). When I run the code I have the main zone is a wide skinny area. I was hope for an 80% X 80% main docking zone.
.Main { height:80%; width: 80%; } .Main { height:80%; width: 20%; } <td class="Main"> <telerik:RadDockZone ID="Main" Runat="server" height="100%" width="100%"> </telerik:RadDockZone> </td> <td class="Side"> <telerik:RadDockZone ID="Side" Runat="server" Height="450px" Width="100%"> <telerik:RadDock ID="RadDock1" Runat="server" Resizable="True" Text="MAP" Title="xy" Width="300px" Collapsed="True"> <ContentTemplate> </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock5" Runat="server" Resizable="True" Text="Blog" Collapsed="True" Title="x" Width="300px"> <ContentTemplate> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </td>1 Answer, 1 is accepted
0
Hello Sammy,
The problem comes from the fact that the zone's parent element, which in this case is a <td/>, does not have height set. Yes you have set height of 80% to the <td/>, but I suppose that its parent does not have any height set. Basically, when setting dimensions in percentage values, at least one of the HTML element's parents must have height in pixels.
I created a sample project based on your code, and set height of 500px to the parent <table/>. Notice that everything works as expected:
Kind regards,
Pero
the Telerik team
The problem comes from the fact that the zone's parent element, which in this case is a <td/>, does not have height set. Yes you have set height of 80% to the <td/>, but I suppose that its parent does not have any height set. Basically, when setting dimensions in percentage values, at least one of the HTML element's parents must have height in pixels.
I created a sample project based on your code, and set height of 500px to the parent <table/>. Notice that everything works as expected:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> .Main { height: 80%; width: 80%; } .Side { height: 80%; width: 20%; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="RadScriptManager1" runat="server"> </asp:ScriptManager> <table style="width: 100%; height: 500px;"> <tr> <td class="Main"> <telerik:RadDockZone ID="Main" runat="server" Height="100%"> </telerik:RadDockZone> </td> <td class="Side"> <telerik:RadDockZone ID="Side" runat="server"> <telerik:RadDock ID="RadDock1" runat="server" Resizable="True" Text="MAP" Title="xy" Width="300px" Collapsed="True"> <ContentTemplate> Content1 </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock5" runat="server" Resizable="True" Text="Blog" Collapsed="True" Title="x" Width="300px"> <ContentTemplate> Content 2 </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </td> </tr> </table> </form></body></html>Kind regards,
Pero
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.