ItemHeaderTemplate problem

3 posts, 1 answers
  1. Michael Pullella
    Michael Pullella avatar
    26 posts
    Member since:
    Nov 2009

    Posted 26 Apr 2010 Link to this post

    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. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 29 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael Pullella
    Michael Pullella avatar
    26 posts
    Member since:
    Nov 2009

    Posted 29 Apr 2010 Link to this post

    Thank you.  As always, you guys really have the best customer service in the industry!
Back to Top