Hi,
We have a request from our UX Designer for the Radzen Blazor ContextMenu to do the following:
- Not cover the scrollbar
- Only reside in the parent, like within a datagrid
An example of the current behavior is in the image attached below:
My understanding is that the context menu is only constrained to the browser window boundries, and there are no Radzen features to do either requests (either not cover the scrollbar or set the boundries to a parent element vs the entire window). Is this correct?
I am not sure that this request can be done easily, but I wanted to get your thoughts as there may have been similar requests.
thanks
Rob
Radzen Blazor Studio Professional owner
Hello Rob,
Would need more information on use case scenario and context on these UX requests, but if these are mandatory I'd say that the context menu is not the right component to use. Not covering the scrollbar or residing in a parent element is quite against the nature of the context menu component. Native desktop context menus do not even take into account the window boundary and are only restricted by the physical screen boundaries.
You could achieve "1. Not cover the scrollbar", by adding custom margins to RadzenContextMenu. This is the CSS rule to add in site.css:
.rz-context-menu {
margin: 20px;
}
Have in mind that this will also offset the menu from the position of the cursor. You can play with margin-top/right/bottom/left as you see fit.
As for "2. Only reside in the parent, like within a datagrid" - without usage scenario and taking a wild guess, I would suggest you also have a look at component like SplitButton (although it makes use of a popup like the ContextMenu) or consider placing a PanelMenu inside an absolute positioned element whose dimensions you can control (that would require some custom styles and logic to show/hide and position the element).
Thank you for the in-depth answer, suggestions and verifying the current working functionality. This will help us move in the right direction.
