I am trying to get two RadDocks to take up all the vertical space in a RadDockZone and can accomplish this by using percentages where one dock height is 30% and the other is 70%. This takes up all the vertical space but the content in the dock with 30% hieght dock disappears in a div that is height 0.
It would appear that the div that takes the <ContentTemplate></ContentTemplate> area is getting a size set to it. Is there any way to keep this behavior from happening?
It would appear that the div that takes the <ContentTemplate></ContentTemplate> area is getting a size set to it. Is there any way to keep this behavior from happening?
3 Answers, 1 is accepted
0
Hello Aaron,
Setting Width and Height of the RadDock in percentage values is not supported, because of one main reason - in quite a lot of scenarios the Width and Height are computed dynamically, and are set to a fixed values in pixels. The scenarios involve: expanding and collapsing the dock, resizing the dock, dragging the dock in some specific cases.
So, if you still require Height in percents, you could enforce it using custom CSS, as shown in this code:
All the best,
Pero
the Telerik team
Setting Width and Height of the RadDock in percentage values is not supported, because of one main reason - in quite a lot of scenarios the Width and Height are computed dynamically, and are set to a fixed values in pixels. The scenarios involve: expanding and collapsing the dock, resizing the dock, dragging the dock in some specific cases.
So, if you still require Height in percents, you could enforce it using custom CSS, as shown in this code:
<!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"> .dock70 { height: 70% !important; } .dock30 { height: 30% !important; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="RadScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> //Put your JavaScript code here. </script> <div> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="1000px" Width="300px"> <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px" CssClass="dock70"> <ContentTemplate> Dock's Content 70% </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px" CssClass="dock30"> <ContentTemplate> Dock's Content 30% </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> </div> </form></body></html>All the best,
Pero
the Telerik team
0
Aaron
Top achievements
Rank 1
Rank 1
answered on 29 Mar 2011, 10:34 PM
Thanks for the reply and that did seem to fix the issue when viewing the site in a browser that isn't IE or viewing it in IE's quirks mode. It seems to be ignoring the heights even though they have !important when rendering it in IE8 or 7.
0
Hello Aaron,
I tested under IE8 and everything is working OK. However there are problem under IE6 and IE7, and they seem to be browser related, because we are using a <table/> element in the dock which has height of 100%, and this is causing problems. The first table row ( <tr/>) and the last are with fixed height, and the middle takes up the rest of the height. This however causes problems in IE7 and IE6, and that's why we can't use percentage values for the Height property. I searched this issue on the internet and it turns out that many other people have similar problems, and have reported the bug to Microsoft. Unfortunately MS have fixed the bug in the next version of IE, and not in IE7. Here are some of the complaints:
My suggestion is to set fixed height in pixels to the docks and the zone.
Kind regards,
Pero
the Telerik team
I tested under IE8 and everything is working OK. However there are problem under IE6 and IE7, and they seem to be browser related, because we are using a <table/> element in the dock which has height of 100%, and this is causing problems. The first table row ( <tr/>) and the last are with fixed height, and the middle takes up the rest of the height. This however causes problems in IE7 and IE6, and that's why we can't use percentage values for the Height property. I searched this issue on the internet and it turns out that many other people have similar problems, and have reported the bug to Microsoft. Unfortunately MS have fixed the bug in the next version of IE, and not in IE7. Here are some of the complaints:
- http://www.winvistatips.com/ie7-first-row-height-attribute-ignored-table-height-100-a-t304689.html
- http://www.codingforums.com/showthread.php?t=133385
My suggestion is to set fixed height in pixels to the docks and the zone.
Kind regards,
Pero
the Telerik team