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

RadDock with TitlebarTemplate and UpdatePanel Renders strangely in Chrome

1 Answer 54 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Karrie
Top achievements
Rank 1
Karrie asked on 23 Oct 2012, 12:42 PM
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>

1 Answer, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 26 Oct 2012, 11:48 AM
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.
Tags
Dock
Asked by
Karrie
Top achievements
Rank 1
Answers by
Slav
Telerik team
Share this question
or