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

RADMenu MasterPages & CSS

2 Answers 213 Views
Menu
This is a migrated thread and some comments may be shown as answers.
JK
Top achievements
Rank 1
JK asked on 03 Jun 2008, 03:22 PM
Hi,

I have a very bizarre problem, which I am hoping someone may have some idea in solving...

I have a application which uses masterpages, on the masterpage is a RADmenu which is connected to a SQL database.  I have created a CSS file which controls the width of the radmenu.

The formatting works if the menu is in the content section, but does not work in masterpage.  I have found that if you place the stylesheet in the contentpage like this...

<

asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">

<link href="../Menu.Telerik.css" rel="stylesheet" type="text/css" />


it works, but this is a real pain as it requires me to add this to every page, which sort of destroys the whole point of masterpages.  My understanding is that the page is rendered backwards starting from the contentpage and working out to the masterpage.  What is confusing me is that other elements on the masterpage are formatting correctly, its just the menu, is this a bug or am I being stupid (probably the later :o) ).
 below is my master page.  Any assistance would be greatfully recieved.
<%@ Master Language="C#"  AutoEventWireup="true" CodeBehind="Masterpage.Master.cs" Inherits="Standard.Site1"  %> 
<%@ 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"> 
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"/>  
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head id="Head1" runat="server">  
    <title>UKLPG Standard Application</title> 
    
      
</head> 
 
<body> 
    <form id="form1" runat="server">  
        <div id="header">    
    <div id="logo">  
    <h1><asp:Image ID="Image1" runat="server" ImageUrl="~/Images/autogasqc.gif" /></h1>  
    </div> 
    <div id="menu">  
        <table cellpadding="0" cellspacing="0" width="100%">  
            <tr> 
            <td colspan="3" style="width: 553px">  
      
        <asp:SqlDataSource ID="dsTheMenu" runat="server" ConnectionString="<%$ ConnectionStrings:TheConnection %>" 
            SelectCommand="GetItems" SelectCommandType="StoredProcedure" CancelSelectOnNullParameter="False">  
        </asp:SqlDataSource> 
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
                </telerik:RadScriptManager> 
        <table cellpadding=0 cellspacing=0 align="center">      
    <tr>     
        <td>    
              
        <telerik:RadMenu ID="RadMenu1" Style="z-index:3501;float: inherit;text-align:center;"  runat="server" DataFieldID="ID" DataFieldParentID="Parent" 
            DataMember="DefaultView" DataNavigateUrlField="Url" DataSourceID="dsTheMenu" 
            DataTextField="Title" Skin="Telerik" ClickToOpen="True" SkinID="Standard"  EnableEmbeddedBaseStylesheet="true" > 
            <CollapseAnimation Duration="200" Type="OutQuint"  /> 
            <DefaultGroupSettings Width="10px" /> 
        </telerik:RadMenu> 
         </td></tr></table>     
        </td> 
                <td style="height: 20px; text-align: center; width: 100px;">  
                    </td> 
            </tr> 
        </table> 
        
      </div>   
      
    </div>   
                              
 
<div id="content" style="text-align: left">   
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">  
    </asp:ContentPlaceHolder> 
      
</div> 
       
    </form> 
      
</body> 
</html> 

2 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 04 Jun 2008, 07:54 AM
Hi JK,

Have you tried placing the stylesheet link in the master page head tag, i.e.

<%@ Master Language="C#"  AutoEventWireup="true" CodeBehind="Masterpage.Master.cs" Inherits="Standard.Site1"  %>    
<%@ 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">    
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"/>     
    
<html xmlns="http://www.w3.org/1999/xhtml" >    
<head id="Head1" runat="server">     
    <title>UKLPG Standard Application</title>    
    <link href="../Menu.Telerik.css" rel="stylesheet" type="text/css" />         
</head>    
 

In addition, please note that in order to use a modified skin you will have to set the menu's EnableEmbeddedSkins property to false. For details on the matter please refer to this help article.

Best wishes,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
JK
Top achievements
Rank 1
answered on 04 Jun 2008, 09:46 AM
Hi Paul,

Thanks for your reply.  I am upgrading my website from version 2007 q2 to 2008q1 and the q2 site had a customised css file for the menu.  What I am finding now is that the menus just dont behave like they used to :o(

thanks for pointing out that embedstylesheet was set to false but that was intentional so the menu would be visible for my boss to review... 

If it was set to false, the menu would only look correct if I put the CSS file link in the content page, but if I put the stylesheet link in the masterpage it did nothing.  It is also important to note that I am using a theme where I have a master CSS file in there.  This is why I made the comment about the rendering starting from the content page then out to the master page. 

I have had to completely rewrite the header section of the master css file to get the menu to fit.  Its not perfect but will suffice for the time being.. 

Tags
Menu
Asked by
JK
Top achievements
Rank 1
Answers by
Paul
Telerik team
JK
Top achievements
Rank 1
Share this question
or