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

DockZone minHeight = 100% not functioning as expected

1 Answer 29 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Sean asked on 04 Feb 2011, 07:20 PM
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,


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 08 Feb 2011, 04:23 PM
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 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" "">
    <head runat="server">
        <style type="text/css">
                padding: 1px 0px;
        <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>

    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.
    Asked by
    Top achievements
    Rank 2
    Answers by
    Telerik team
    Share this question