Center Label Vertically in Dock Title Bar

6 posts, 1 answers
  1. Tim DiPaula
    Tim DiPaula avatar
    16 posts
    Member since:
    Jul 2009

    Posted 02 Mar 2010 Link to this post

    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>    

  2. Jim
    Jim avatar
    31 posts
    Member since:
    Jun 2009

    Posted 04 Mar 2010 Link to this post

    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> 

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tim DiPaula
    Tim DiPaula avatar
    16 posts
    Member since:
    Jul 2009

    Posted 05 Mar 2010 Link to this post

    Using this approach center's the image vertically correctly but when you add a Label to the TitleBarTemplate the label text is pushed down to the bottom of the bar.
  5. Tim DiPaula
    Tim DiPaula avatar
    16 posts
    Member since:
    Jul 2009

    Posted 07 Mar 2010 Link to this post

    Does anyone in Telerik Tech Support have an example for doing this?
  6. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 10 Mar 2010 Link to this post

    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">
    <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 />
                            <br />
                            CONTENT
                            <br />
                            <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.
  7. Tim DiPaula
    Tim DiPaula avatar
    16 posts
    Member since:
    Jul 2009

    Posted 10 Mar 2010 Link to this post

    This worked great.  The only change I made was to remove the "width:100%" attribute from the table element.  That was causing the commands to get pushed down below the bar.  Thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017