RadDock with TitlebarTemplate and UpdatePanel Renders strangely in Chrome

[Karrie]

I have a RadDock with a TitlebarTemplate with an Update Panel with a LinkButton that takes the user to another .aspx page.
That all works well and renders properly in IE (thanks for the awesome control - love it).
My only issue is that these controls that have the updatepanels with the linkbuttons render wierdly in Chrome.

I have attached screenshots of both.
Following is my code, kindly assist!

.RadDock .rdCenter EM
    {
        font-size:22px;
        vertical-align:top;
    }

<telerik:RadDockLayout runat="server" ID="RadDockLayout1" EnableEmbeddedSkins="false"
        Skin="None">
        <table>
            <tr>
                <td rowspan="2" style="width: 25%; padding-left: 1%; padding-right: 1%; vertical-align: top">
                    <telerik:RadDockZone AllowedDocks="rdProjects" runat="server" ID="RadDockZone1" Orientation="vertical"
                        Style="border: 0; width: 280px">
                        <telerik:RadDock DockMode="Docked" runat="server" ID="rdProjects" Font-Size="20px" EnableDrag="false"
                            Title="Latest Featured Projects" Height="390px" EnableRoundedCorners="true" Skin="WebBlue"
                            DefaultCommands="None" Style="padding-top: 6px">
                            <TitlebarTemplate>
                                <asp:UpdatePanel runat="server" ID="UpdatePanel1">
                                    <ContentTemplate>
                                        <asp:LinkButton runat="server" ID="LinkButton1" ForeColor="White" Text="Latest Featured Projects"
                                            OnClientClick="GoToPage('ProjectListing.aspx');">
                                        </asp:LinkButton>
                                        <br />
                                        <br />
                                        <div id="boats" >
                                            @@$5$1$$@@
                                        </div>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </TitlebarTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
                <td rowspan="2" valign="top" style="width: 25%; height: 17px; padding-left: 1%; padding-right: 1%;">
                    <telerik:RadDockZone AllowedDocks="rdTestimonials" runat="server" ID="RadDockZone2"
                        Orientation="vertical" Style="border: 0; width: 280px">
                        <telerik:RadDock DockMode="Docked" runat="server" ID="rdTestimonials" Font-Size="20px" EnableDrag="false"
                            Title="Testimonials" Height="390px" EnableRoundedCorners="true" Skin="WebBlue"
                            DefaultCommands="None" Style="padding-top: 6px">
                            <TitlebarTemplate>
                                <asp:UpdatePanel runat="server" ID="UpdatePanel2">
                                    <ContentTemplate>
                                        <asp:LinkButton runat="server" ID="LinkButton2" ForeColor="White" Text="Testimonials"
                                            OnClientClick="GoToPage('Testimonials.aspx');">
                                        </asp:LinkButton>
                                        <br />
                                        <br />
                                        <div id="tests" style="color: Black">
                                            @@[[6<div class="testItem" style="width: 99%; padding: 1px; color: Black">
                                                @@#6#@@
                                            </div>
                                            ]]@@</div>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </TitlebarTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
                <td style="width: 50%;padding-top:5px">
                    <table >
                        <tr>
                            <td>
                            </td>
                            <td valign="top" style="width: 48%; padding-left: 1%; padding-right: 1%;">
                                <telerik:RadDockZone AllowedDocks="rdStats" runat="server" ID="RadDockZone3" Orientation="vertical"
                                    Style="border: 0; width: 280px">
                                    <telerik:RadDock DockMode="Docked" runat="server" ID="rdStats" Title="Current Stats" EnableDrag="false"
                                        Height="170px" EnableRoundedCorners="true" Skin="WebBlue" DefaultCommands="None">
                                        <ContentTemplate>
                                            <br />
                                            <table class="content">
                                                <tr>
                                                    <td>
                                                        @@#4#@@
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </telerik:RadDock>
                                </telerik:RadDockZone>
                            </td>
                            <td>
                            </td>
                            <td valign="top" style="width: 48%; padding-left: 1%; padding-right: 1%;">
                                <telerik:RadDockZone AllowedDocks="rdDiscounts" runat="server" ID="RadDockZone4"
                                    Orientation="vertical" Style="border: 0; width: 280px">
                                    <telerik:RadDock DockMode="Docked" runat="server" ID="rdDiscounts" Font-Size="20px" EnableDrag="false"
                                        Title="Special Discounts" Height="170px" EnableRoundedCorners="true" Skin="WebBlue"
                                        DefaultCommands="None">
                                        <ContentTemplate>
                                            <br />
                                            <table>
                                                <tr>
                                                    <td>
                                                        <a href="discount.aspx">
                                                            <img src="@@*5*@@" alt="@@?5?@@" /></a>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ContentTemplate>
                                    </telerik:RadDock>
                                </telerik:RadDockZone>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="width: 50%;">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                            </td>
                            <td valign="top" style="width: 48%; padding-left: 1%; padding-right: 1%;">
                                <telerik:RadDockZone AllowedDocks="rdNews" runat="server" ID="RadDockZone5" Orientation="vertical"
                                    Style="border: 0; width: 280px">
                                    <telerik:RadDock DockMode="Docked" runat="server" ID="rdNews" Font-Size="20px" Title="News" EnableDrag="false"
                                        EnableRoundedCorners="true" Skin="WebBlue" DefaultCommands="None" Height="200px">
                                        <TitlebarTemplate>
                                            <asp:UpdatePanel runat="server" ID="UpdatePanel4">
                                                <ContentTemplate>
                                                    <asp:LinkButton runat="server" ID="LinkButton4" ForeColor="White" Text="News" OnClientClick="GoToPage('News.aspx');">
                                                    </asp:LinkButton><br /><br />
                                                    <div style="font-size: 12px">
                                                        @@^3^@@
                                                    </div>
                                                </ContentTemplate>
                                            </asp:UpdatePanel>
                                        </TitlebarTemplate>
                                    </telerik:RadDock>
                                </telerik:RadDockZone>
                            </td>
                            <td>
                            </td>
                            <td valign="top" style="width: 48%; padding-left: 1%; padding-right: 1%;">
                                <telerik:RadDockZone AllowedDocks="rdProjects" runat="server" ID="RadDockZone6" Orientation="vertical"
                                    Style="border: 0; width: 280px">
                                    <telerik:RadDock DockMode="Docked" runat="server" ID="RadDock1" Font-Size="20px" EnableDrag="false"
                                        Title="Events" Height="200px" EnableRoundedCorners="true" Skin="WebBlue" DefaultCommands="None">
                                        <TitlebarTemplate>
                                            <asp:UpdatePanel runat="server" ID="UpdatePanel3">
                                                <ContentTemplate>
                                                    <asp:LinkButton runat="server" ID="LinkButton3" ForeColor="White" Text="Events" OnClientClick="GoToPage('Events.aspx');">
                                                    </asp:LinkButton><br /><br />
                                                    <div style="font-size: 12px">
                                                        @@^2^@@
                                                    </div>
                                                </ContentTemplate>
                                            </asp:UpdatePanel>
                                        </TitlebarTemplate>
                                    </telerik:RadDock>
                                </telerik:RadDockZone>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </telerik:RadDockLayout>

[Slav]

Hello Karrie,

The UpdatePanel stretches the RadDock title bar, which leads to the examined problem. When you place elements and controls in the TitlebarTemplate of the docks, you should ensure that the content can fit in the available space. In your case you can wrap the UpdatePanel with a div element that has a specific height as shown in the following example:

<telerik:RadDock DockMode="Docked" runat="server" ID="rdProjects" Font-Size="20px"
    EnableDrag="false" Title="Latest Featured Projects" Height="390px" EnableRoundedCorners="true"
    Skin="WebBlue" DefaultCommands="None" Style="padding-top: 6px">
    <TitlebarTemplate>
        <div style="height: 25px;">
            <asp:UpdatePanel runat="server" ID="UpdatePanel1">
                <ContentTemplate>
                    <asp:LinkButton runat="server" ID="LinkButton1" ForeColor="White" Text="Latest Featured Projects"
                        OnClientClick="GoToPage('ProjectListing.aspx');">
                    </asp:LinkButton>
                    <br />
                    <br />
                    <div id="boats">
                        @@$5$1$$@@
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </TitlebarTemplate>
</telerik:RadDock>

 

Greetings,
Slav
the Telerik team