Hi All,
I have a static RadDockZone nested inside of a RadPane. The RadDockZone's height is unset, but its minHeight is set to 100%. I am following this advice based off of a discussion with Pero here.
On initial page load the RadDockZone's height is slightly too large -- The same issue that I was having here. Unfortunately, the solution is not the same -- if I do not have minHeight set to 100% then the RadDockZone does not attempt to fill the entire space that is nested inside. If Telerik has a suggestion on how to achieve both of these results at the same time that would be appreciated.
Thanks for the help,
Sean
I have a static RadDockZone nested inside of a RadPane. The RadDockZone's height is unset, but its minHeight is set to 100%. I am following this advice based off of a discussion with Pero here.
On initial page load the RadDockZone's height is slightly too large -- The same issue that I was having here. Unfortunately, the solution is not the same -- if I do not have minHeight set to 100% then the RadDockZone does not attempt to fill the entire space that is nested inside. If Telerik has a suggestion on how to achieve both of these results at the same time that would be appreciated.
Thanks for the help,
Sean
1 Answer, 1 is accepted
0
Accepted
Hello Sean,
I think with some custom CSS this can be easily achieved. The problem is again caused by the padding of the docking zone, and the border-width, which add additional 10px (2x4px [padding] + 2x1px [border]) to the height of the zone. So we should try to remove this extra height. Here is my approach:
The last two actions are not necessary if the zone does not have border.
The following code implements the above mentioned approach:
Regards,
Pero
the Telerik team
I think with some custom CSS this can be easily achieved. The problem is again caused by the padding of the docking zone, and the border-width, which add additional 10px (2x4px [padding] + 2x1px [border]) to the height of the zone. So we should try to remove this extra height. Here is my approach:
- The MinHeight of the zone has 100%;
- The top and bottom padding of the zone is set to 0px;
- We set margin-top: 4px to the first dock in the zone to compensate for the padding-top:0px of the zone.
- We set to the zone margin-top: -1px and margin-bottom: -1px, to compensate for the top and bottom borders of the zone;
- This of course will cause the pane, where the zone resides, to overlap the borders, so we have to add 1px to the existing padding top and bottom values of the parent RadPane, i.e. by default padding-top: 1px and padding-bottom: 1px because the pane does not have any padding.
The last two actions are not necessary if the zone does not have border.
The following code implements the above mentioned approach:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!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"> .panePadding { padding: 1px 0px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager runat="server" /> <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="1000px"> <telerik:RadPane ID="Pane1" runat="server" CssClass="panePadding"> <telerik:RadDockZone ID="zone1" runat="server" MinHeight="100%" Style="padding-top: 0px; padding-bottom: 0px; margin-bottom: -1px; margin-top: -1px;"> <telerik:RadDock ID="RadDock1" runat="server" style="margin-top:4px;"></telerik:RadDock> </telerik:RadDockZone> </telerik:RadPane> </telerik:RadSplitter> </form></body></html>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.