How can I prevent a radzen menu appearing off the bottom of the screen

Radzen.Blazor Components
1

I'm currently using the following code to attach a radzen menu to a RadzenGridColumn:

image
image1184×136 12.4 KB

The onmouseover handler, then fires this event:

image
image825×312 19 KB

This all works really well, except for one problem, when I open the menu too close to the bottom of the screen, the menu appears off screen, inhibiting the ability to see the whole menu:

image
image634×806 20.5 KB

Is there anyway I can make the menu open so that it fully appears on the screen.

My current spec for the application states these menus must open on hover, and must be in the individual grid columns, so I can't put them outside the grid, as the menu's are item specific.

2

Hi @shawty,

At the moment this is not supported - we will do our best to include it in the next update before the end of this week.

3

Thanks @Encev that's good to hear.

4

The fix is already in the master branch:

1 Like
5

Great stuff, I'll have to wait until it's in the NuGet package though, corp policy won't allow me to build from source.

6

I have this same issue with RadzenMenu, where the RadzenMenuItem opens off the bottom of the screen. I am using 3.20.12 but I have tested with the current 4.1.14 release and get the same results.

7

RadzenMenu does not have screen boundary detection and is mostly meant for top menu navigation. We recommend using either RadzenContextMenu or RadzenSplitButton that both support what you need.

8

Yes, thank you. The RadzenSplitButton does exactly what I need.

9

I has a similar issue and used the following mark-up to solve:

.rz-menu:not(.rz-profile-menu) .rz-navigation-menu{
    max-height: 75vh;
    overflow:auto;
}

Note: "vh" allows you to set the overall menu height in relation to the viewport rather than the menu element container.

1 Like