Tim DiPaula
Top achievements
Rank 1
Rank 1
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
0
Jim
Top achievements
Rank 1
Rank 1
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> |
0
Tim DiPaula
Top achievements
Rank 1
Rank 1
answered on 05 Mar 2010, 02:58 PM
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.
0
Tim DiPaula
Top achievements
Rank 1
Rank 1
answered on 07 Mar 2010, 04:18 PM
Does anyone in Telerik Tech Support have an example for doing this?
0
Accepted
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:
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.
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 /> <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.
0
Tim DiPaula
Top achievements
Rank 1
Rank 1
answered on 10 Mar 2010, 06:57 PM
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.