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

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

The onmouseover handler, then fires this event:

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:

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.

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.

Thanks @Encev that's good to hear.

The fix is already in the master branch:

1 Like

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.

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.

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.

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

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;

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

1 Like