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

ItemHeaderTemplate problem

2 Answers 80 Views

Dock

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

Michael Pullella asked on 26 Apr 2010, 04:20 PM

Hello

We are using the raddock with a custom header template and it seems that the rounded corners image is being repeated at the bottom of the header.

The markup for the page is as follows:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Docks.aspx.cs" Inherits="TelerikClientSide.Docks" %> 
        
            <%@ 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 runat="server">  
        
                <title></title>  
        
            </head> 
        
                <body style="margin:0px;height:100%;overflow:hidden;">  
        
                    <form id="Form2" method="post" runat="server" style="height:100%;margin:0px" > 
        
                        <telerik:RadScriptManager ID="ScriptManager1" runat="server" /> 
        
                        <asp:Panel ID="HeaderPanel" runat="server" Width="100%">  
        
                            <table cellpadding="0" cellspacing="0" width="100%">  
        
                                <tr> 
        
                                    <td> 
        
                                        Header here  
        
                                    </td> 
        
                                </tr> 
        
                            </table> 
        
                        </asp:Panel> 
        
                        <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" HeightOffset="100">  
        
                            <telerik:RadPane ID="NavigationPane" runat="server" Width="275px" MaxWidth="500" Scrolling="None">  
        
                                <telerik:RadDockZone ID="dockZoneLeftSideBar" runat="server" Orientation="Vertical"  Height="100%">    
        
                                    <telerik:RadDock ID="RadDock5" runat="server" EnableRoundedCorners="true" Title="Navigation" DockMode="Docked" Width="200px" DefaultCommands="None">    
        
                                        <TitlebarTemplate> 
        
                                            <table width="100%" cellpadding="0" cellspacing="0" border="0">  
        
                                                <tr> 
        
                                                    <td style="font-size:10pt; font-family:Arial">Navigation</td> 
        
                                                    <td align="right" style="cursor:default">  
        
                                                        <img src="../images/add.png" /> 
        
                                                        <img src="../images/printer.png" /> 
        
                                                        <img src="../images/disk.png" /> 
        
                                                        <img src="../images/rename.png" /> 
        
                                                    </td> 
        
                                                </tr> 
        
                                            </table> 
        
                                        </TitlebarTemplate> 
        
                                        <ContentTemplate> 
        
                                            <div id="divNavigationLoading" style="width:100%; text-align:center;">  
        
                                                Loading...  
        
                                            </div> 
        
                                        </ContentTemplate> 
        
                                    </telerik:RadDock> 
        
                                </telerik:RadDockZone> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="NavigationContentSplitBar" runat="server" CollapseMode="Forward" /> 
        
                            <telerik:RadPane ID="RadPane1" runat="server">  
        
                                Content Here                  
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                        <telerik:RadSplitter id="Radsplitter6" runat="server" orientation="Horizontal" Width="100%" Height="40">  
        
                            <telerik:RadPane id="Radpane11" runat="server">   
        
                                Footer Here  
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                </form> 
        
            </body> 
        
            </html>

Probably very easy to fix this, any suggestions?

2 Answers, 1 is accepted

Accepted

answered on 29 Apr 2010, 06:57 AM

Hi Michael,

Please try to wrap the content inside a <div/> with float: left; and line-height: 17px;:

<TitlebarTemplate>

<div style="float: left; line-height: 17px !important; color: #000; width: 100%;">

<table width="100%" cellpadding="0" cellspacing="0" border="0">

<tr>

<td style="font-size: 10pt; font-family: Arial;">

Navigation

</td>

<td align="right" style="cursor: default;">

<img src="img/CustomImg.png" alt="1" width="23px" height="23px" />

</td>

</tr>

</table>

</div>

</TitlebarTemplate>

Please note that the height of the images should not exceed 23px, because parts of the image shown that should not be visible will be shown.

Kind 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.