Rad Dock Inside Table Cell

2 posts, 0 answers
  1. Sammy
    Sammy avatar
    5 posts
    Member since:
    Dec 2010

    Posted 18 Apr 2011 Link to this post

    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>
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 21 Apr 2011 Link to this post

    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:
    <!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">
            .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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top