Menu and ContextMenu on same page - layout problem

2 posts, 0 answers
  1. AnneArents
    AnneArents avatar
    14 posts
    Member since:
    Jan 2010

    Posted 17 Mar 2014 Link to this post

    Hi,

    I have a website with a RadMenu, which works great.
    The menu is styled using some CSS.
    Now I want to add a RadContextMenu to that same page, but doing so breaks the layout of the RadMenu.

    Simply adding an empty contextmenu:
    <telerik:RadContextMenu ID="Menu2" runat="server"></telerik:RadContextMenu>
    changes the layout of the RadMenu to the default skin (it seems)

    This is the RadMenu:
    <telerik:RadMenu ID="HoofdMenu" EnableEmbeddedSkins="false" Height="20px" Font-Size="11px" runat="server" CollapseDelay="0" ExpandDelay="0" ClickToOpen="true" ExpandAnimation-Type="None" CollapseAnimation-Type="None" CausesValidation="false"></telerik:RadMenu>
    and this is the CSS used to style it:

    .hoofdmenu
    {       
        color: #FFFFFF;   
        cursor: pointer !important;
        height: 25px;
        font-size: 12px;       
    }
    .hoofdmenu:hover
    {
        color: #8FB1B1;   
    }
     
    .hoofdmenu_expanded
    {
        color: #8FB1B1;   
    }
     
    .submenu
    {  
        padding-top: 5px !important;
        background-color: #1C2948;   
        color: #FFFFFF;
        height: 25px;   
        cursor: pointer !important;
        text-decoration: none;
        font-size: 12px;   
         
    }
    .submenu:hover
    {   
        color: #1C2948;
        background-color: #D5E1E1;       
    }

    (The 'hoofdmenu' and 'submenu' classes are given to root and subitems in code)

    Any idea how this can happen?
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Mar 2014 Link to this post

    Hi CJ,

    In general when you have only a single menu on the page and you set the EnableEmbeddedSkins property to false, no skin file will be loaded (like your initial case). However, once you set an additional menu that uses these styles they will get loaded and consequently applied to the first menu as well. To workaround this, you will need to explicitly specify a specific skin to the menu that you are trying to customize and use this skin instead. Please refer to the following article where it is explained in details how this can be achieved - Tutorial: Creating A Custom Skin Using Sprite.

    Regards,
    Kate
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top