RadDock with TitlebarTemplate and UpdatePanel Renders strangely in Chrome

2 posts, 0 answers
  1. Karrie
    Karrie avatar
    2 posts
    Member since:
    Aug 2012

    Posted 23 Oct 2012 Link to this post

    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>
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 26 Oct 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top