radContextmenu appearing under Radmenu

[Brete]

I am having an issue trying the get a radcontextmenu appear above a radmenu.  

Following the instruction about positioning controls from  https://docs.telerik.com/devtools/aspnet-ajax/controls/controlling-absolute-positioning-with-z-index

The appearance is correct on IE 11 and Edge, but appears as attached when viewed in Chrome.  

The deckaration for RadContextMenu:

 

  <telerik:RadContextMenu ID="RadContextMenu1" runat="server" Skin="Black1" EnableEmbeddedSkins="false"    RenderMode="Lightweight"    style="z-index:483647"  >
  <Items>
      <telerik:RadMenuItem>
      


      </telerik:RadMenuItem>

  </Items>
                                
                                        
</telerik:RadContextMenu>

The declaration for The Radmenu:

 <telerik:RadMenu ID="RadMenu1" runat="server"   Skin="Default"   RenderMode="Lightweight"  style="z-index: 12345"  OnItemClick="RadMenu1_ItemClick">
</telerik:RadMenu>

 

I don't think I am missing any thing.   

[Doncho]

Hello Brete,

You can achieve the desired by applying an additional style to override the built-in z-index of the ContextMenu so that it is rendered "above" the RadMenu.

You can use the CssClass property to differentiate the specific ContextMenu that need its styles to be overridden. See the sample below for a reference:

Markup declaration

<telerik:RadContextMenu runat="server" ID="RadContextMenu1" CssClass="higherMenu">

CSS

.RadMenu.RadMenu_Context.higherMenu{
    z-index:7010 !important;
}

 

I hope that helps. Feel free to give it a try and let me know about the result.

Kind regards,
Doncho
Progress Telerik

[Brete]

Worked Great,   Thanks.