RadzenMenu z-order problem

Radzen.Blazor Components
1

I'm brand new to Radzen and the first control I try was a top menu and the dropdowns are behind the rest of the form. Cut\paste from this website. Is there some extra magic required to get the right z-order? I'm using this is VS 2019, blazor.server project.
tks.

2

Hi @kevin1,

Can you point us to some of our demos where we can reproduce this?

3

I'm only aware of the one at Blazor Menu | a free UI component by Radzen.

Starts








I put that in my NavMenu.razor and refer to it from this MainLayout.razor
@inherits LayoutComponentBase

<RadzenDialog />
<RadzenNotification />
<RadzenContextMenu />
<RadzenTooltip />

<div class="container">
    <div class="row text-center">
        <div class="col-2">
            <h3>ProdCtrl</h3>
        </div>
        <div class="col-10">
            <NavMenu />
        </div>
    </div>

    <div class="container pb-3">
        <main role="main" class="">
            @Body
        </main>
    </div>

    <footer class="border-top footer">
        <div class="container">
            &copy; 2021
        </div>
    </footer>
</div>

if I increase the height of the Card, I only seem to be able to click on submenu items that are within the card. Lower items display with lower z-order "under" the parts of the @Body.

4

I was having the same problem with the ProfileMenu drop down appearing under the column headers in the RadzenDataGrid.

Apparently both ".ul.rz-profile-menu" and ".rz-grid-table thead th" use the same z-index of 1. Raising the z-index on the profile menu fixes it. I'm sure the RadzenMenu can be fixed in a similar fashion.

Below fixed my issue:

.ul.rz-profile-menu {
z-index: 2;
}

Fix for the RadzenMenu:

.rz-navigation-menu {
z-index: 2;
}

1 Like
5

Worked like a charm. tks tons.