I use MudBlazor in my Blazor website.
The MudMenuItems of MudMenu always appear in the upper left corner not on the MudMenu element itself. No matter what I do the menu always opens in the top left corner.
Also only the example menu from the MudBlazor page itself has this problem.
All other MudBlazor items work normally!
What could be the reason?
<MudAppBar Class="custom-appbar" Fixed="true" >
<MudText Typo="Typo.h2" Class="custom-appbar-text" >Name</MudText>
<MudSpacer />
<MudText Typo="Typo.h5" Class="custom-appbar-text-user">@userName</MudText>
<MudMenu Icon="@Icons.Material.Filled.MoreVert" Class="custon-menu" AriaLabel="Open user menu">
<MudMenuItem>Profile</MudMenuItem>
<MudMenuItem>My account</MudMenuItem>
<MudMenuItem>Logout</MudMenuItem>
</MudMenu>
<div class="logo-container">
<MudImage Src="images/logo_1.png" Alt="logo1" Class="appbar-logo" Elevation="5"/>
<MudImage Src="images/logo_2.png" Alt="logo2" Class="appbar-logo" Elevation="8"/>
</div>
</MudAppBar>
.custon-menu {
margin-right: 150px;
margin-top: 450px;
z-index: 2;
}
The error also occurs outside the MudAppBar, all CSS and JavaScript files are loaded correctly.
I also cannot find a CSS entry that triggers this error.
1
You can control the behaviour of the MudMenuItem with AnchorOrigin and TransformOrigin on the MudMenu
The default value for both is Origin.TopLeft
See the documentation MudMenu Placement and its snippet
So for your case I would suggest AnchorOrigin="Origin.TopCenter" aswell TransformOrigin="Origin.TopCenter"
<MudMenu ... AnchorOrigin="Origin.TopCenter" TransformOrigin="Origin.TopCenter">
<MudMenuItem>Profile</MudMenuItem>
<MudMenuItem>My account</MudMenuItem>
<MudMenuItem>Logout</MudMenuItem>
</MudMenu>
Snippet
4