Completed
Last Updated: 19 Dec 2023 17:47 by ADMIN
Release 4.6.0 (11 Oct 2023) (R3 2023)
Will
Created on: 20 May 2021 13:17
Category: Window
Type: Bug Report
9
The ContextMenu is hidden behind the Modal Window

When I try to add a context menu to the content in the Modal Window the context menu stays behind the modal.

===

A possible workaround is to increase the z-index of the ContextMenu:

<TelerikContextMenu Data="@MenuItems" Selector="#menu-target"
                    Class="menu-on-top" />

<style>
    .menu-on-top,
    .k-animation-container:has(.menu-on-top) {
        z-index: 11000 !important;
    }
</style>

<TelerikWindow Width="240px" Height="160px"
               Top="100px" Left="100px"
               Visible="true" Modal="true">
    <WindowTitle>Window</WindowTitle>
    <WindowContent>
        <div style="height:60px;border: 1px solid;"
             id="menu-target">Right-click me</div>
    </WindowContent>
</TelerikWindow>

@code {
    List<ContextMenuItem> MenuItems { get; set; } = new List<ContextMenuItem>();

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 7; i++)
        {
            MenuItems.Add(new ContextMenuItem() { Text = $"Menu item {i}" });
        }

        base.OnInitialized();
    }

    public class ContextMenuItem
    {
        public string Text { get; set; } = string.Empty;
    }
}

3 comments
ADMIN
Nadezhda Tacheva
Posted on: 19 Dec 2023 17:47

Hi Gregg,

The current item tracks the progress of the issue occurring with the UI for Blazor ContextMenu and Window components.

If you are experiencing a similar behavior using the UI for MVC product, you may open a dedicated report in the UI for MVC feedback portal.

Regards,
Nadezhda Tacheva
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Gregg
Posted on: 13 Dec 2023 10:22
We have the exact same problem but in the UI for MVC product (not fixed in the latest version). Have tried to set the z-index, but still have the same issue.
Todd
Posted on: 27 Jun 2023 18:27
This is very helpful thank you! 
The secret sauce of this work-around is the z-index of 11000. The pop-up window has a z-index of 10003 in my case. Setting the z index to anything lower than the window puts it behind the window.