Top Menu Bar - Sizing the Radzen Menu

Radzen.Blazor Components
1

Hi,

I have tried to create a top menu bar using 4 components:

  1. <RadzenStack>
  2. <RadzenMenu>
  3. <RadzenProfileMenu>
  4. <RadzenGravatar>

When I hover over the Radzen Menu Item, it does not contain the entire height of the Radzen Stack due to the Gravatar being larger in height than the menu item.

Is there any way to make the Radzen Menu take up the height of its container?

Code snippet below:

<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="AlignItems.Center" class="border-bottom border-primary">
    <RadzenMenu>
        <RadzenMenuItem Text="Journal Entries" Icon="menu_book">
            <RadzenMenuItem Text="View Journal Entries"/>
        </RadzenMenuItem>
    </RadzenMenu>


    <RadzenProfileMenu class="border-left border-primary">
        <Template>
            <RadzenGravatar Email="replaceme@gmail.com"/>
        </Template>
        <ChildContent>
            <RadzenProfileMenuItem Text="Option 1"/>
            <RadzenProfileMenuItem Text="Option 2"/>
            <RadzenProfileMenuItem Text="Option 3"/>
            <RadzenProfileMenuItem Text="Option 4"/>
        </ChildContent>
    </RadzenProfileMenu>
</RadzenStack>
2

I am not sure what this means. Can you elaborate?

3

Hi Korchev,

The hover effect of the <RadzenMenu> / <RadzenMenuItem> doesn't take up the full height of the parent container when the height is set to 100% while using the standard base template. The white background does take up 100% of the height but the hover effect does not.

Source file test solution (dotnet 8):

image
image2511×241 8.2 KB

4

Everything looks fine to me.
menu

5

In the video the blue hover effect doesn't take up 100% of the white background. Is there a way to do that?