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

ItemHeaderTemplate problem

2 Answers 49 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Michael Pullella
Top achievements
Rank 1
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

Sort by
0
Accepted
Pero
Telerik team
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" />
                    <img src="img/CustomImg.png" alt="1" width="23px" height="23px" />
                    <img src="img/CustomImg.png" alt="1" width="23px" height="23px" />
                    <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.
0
Michael Pullella
Top achievements
Rank 1
answered on 29 Apr 2010, 12:44 PM
Thank you.  As always, you guys really have the best customer service in the industry!
Tags
Dock
Asked by
Michael Pullella
Top achievements
Rank 1
Answers by
Pero
Telerik team
Michael Pullella
Top achievements
Rank 1
Share this question
or