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

Center Label Vertically in Dock Title Bar

5 Answers 210 Views

Dock

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

Tim DiPaula asked on 02 Mar 2010, 06:54 PM

I am using the TitleBarTemplate to display a link button and Image. The problem I am having is getting the control to be centered vertically in the Dock Title bar.

    
            <TitlebarTemplate> 
        
              <div class="RadDock_McpsPurple_TitlePanel"> 
        
                <asp:LinkButton runat="server" ID="ProfDevTitleLinkButton" CssClass="RadDock_McpsPurple_TitleLink"></asp:LinkButton> 
        
                <asp:Image runat="server" ID="ProfDevMoreImage" CssClass="RadDock_McpsPurple_MoreCommand" /> 
        
              </div> 
        
            </TitlebarTemplate>

5 Answers, 1 is accepted

answered on 04 Mar 2010, 04:02 PM

Test the following project:

    
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head id="Head1" runat="server"> 
        
                <title></title> 
        
                <style type="text/css"> 
        
                    .RadDock_McpsPurple_TitlePanel 
        
                    { 
        
                        float: left; 
        
                        vertical-align: middle; 
        
                    } 
        
                    .RadDock_McpsPurple_TitleLink 
        
                    { 
        
                        display: block; 
        
                        float: left; 
        
                        padding: 0px 2px 1px 0px; 
        
                    } 
        
                    .RadDock_McpsPurple_MoreCommand 
        
                    { 
        
                        padding-top: 3px; 
        
                    } 
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                    <Scripts> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        
                    </Scripts> 
        
                </asp:ScriptManager> 
        
                <div> 
        
                    <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> 
        
                        <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"> 
        
                            <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"> 
        
                                <TitlebarTemplate> 
        
                                    <div class="RadDock_McpsPurple_TitlePanel"> 
        
                                        <asp:LinkButton runat="server" ID="ProfDevTitleLinkButton" Text="LinkButton" CssClass="RadDock_McpsPurple_TitleLink"></asp:LinkButton> 
        
                                        <asp:Image runat="server" ID="ProfDevMoreImage" CssClass="RadDock_McpsPurple_MoreCommand" 
        
                                            ImageUrl="~/img/CustomImg.png" /> 
        
                                    </div> 
        
                                </TitlebarTemplate> 
        
                                <ContentTemplate> 
        
                                    <br /> 
        
                                    <br /> 
        
                                    <br /> 
        
                                    <br /> 
        
                                    SAmple Content 

                                    <br /> 
        
                                    <br /> 
        
                                    <br /> 
        
                                    <br /> 
        
                                    <br /> 
        
                                </ContentTemplate> 
        
                            </telerik:RadDock> 
        
                        </telerik:RadDockZone> 
        
                    </telerik:RadDockLayout> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Accepted

answered on 10 Mar 2010, 05:20 PM

Hello Tim,

I believe the easiest way to achieve this is to place the LinkButton and the Image into a <table> element. Here is a sample project:

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<style type="text/css">

.RadDock_McpsPurple_TitlePanel

{

float: left;

height: 27px;

line-height: 27px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

</Scripts>

</asp:ScriptManager>

<div>

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">

<telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">

<telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">

<TitlebarTemplate>

<div class="RadDock_McpsPurple_TitlePanel">

<table style="width: 100%; height: 100%">

<tr>

<td style="vertical-align: middle">

<asp:LinkButton runat="server" ID="ProfDevTitleLinkButton" Text="LinkButton"></asp:LinkButton>

</td>

<td>

<asp:Image runat="server" ID="ProfDevMoreImage" Height="27px" Style="line-height: 27px"

ImageUrl="~/Img.png" />

</td>

<td style="vertical-align: middle">

<asp:Label ID="Label1" runat="server" Text="This is a label"></asp:Label>

</td>

</tr>

</table>

</div>

</TitlebarTemplate>

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</div>

</form>

</body>

</html>

Regards,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.