search

MudBlazor / MudBlazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
http://mudblazor.com
MIT License
7.88k stars 1.25k forks source link

NavMenu Items (NavLink) are not aligning properly. #6450

Open hussamelvani opened 1 year ago

hussamelvani commented 1 year ago

Bug type

Component

Component name

MudNavMenu

What happened?

After upgrading to the latest version, the NavMenu items started showing at the bottom of the menu. I copied this layout from MudBlazor's GitHub page before (I don't think it's available anymore) and it was working fine.

When I downgrade back to 6.1.7 the layout is back to normal (however, I'm having some issues with other components thus, I have to upgrade to the latest version).

Can you please tell me what I'm missing?

Thanks.

Expected behavior

The NavMenu items show up under the Person Information Card.

Reproduction link

https://try.mudblazor.com/snippet/GYcxuHPOIfSJMyoj

Reproduction steps

1.Open the drawer (NavDrawer) 2.Check NavMenu items (NavLink)s

Relevant log output

N/A

Version (bug)

6.1.9

Version (working)

6.1.7

What browsers are you seeing the problem on?

Safari

On what operating system are you experiencing the issue?

Mac OSX

Pull Request

Code of Conduct

hussamelvani commented 1 year ago

Hey, any updates on this?

nhwilly commented 1 year ago

I am just getting started with MB so I looked at your example.

I noticed you are embedding the Drawer inside the AppBar. Is that what you intended?

My AppBar lives on it's own and the drawers are external to the app bar. Does that help?

{EDIT}

Sorry, I missed that the navmenu on the right is not inside a drawer. Threw me.

hussamelvani commented 1 year ago

This layout used to be inside the MB documentation here in GH, but it was removed a while ago. After upgrading to any version past 6.1.7 it just messes with CSS and now the items are anchored to the bottom of the page. (See the example reproduction link)

lappy4711 commented 1 year ago

It behaves better if the MudDivider on line 50 in your example is removed.

Antiohne commented 8 months ago

I can reproduce this behavior. I created within Visual Studio a MudBlazor server project with the AdminDashBoard sample. When I upgrade the NuGet package to a version higher than the mentioned MudBlazor 6.1.7 the left menu will be not top aligned but more bottom aligned.

After some investigation of the HTML source code with the debugger of Chrome (Developer Tools) I noticed that the Divider has a CSS class named mud-divider-fullwidth. After removing this class with the debugger I noticed that the alignment returns to the expected top position. The Divider component has a DividerType attribute (https://mudblazor.com/components/divider) which controls this behavior. It's default is DividerType.FullWidth which generates the mentioned CSS class.

The CSS class has two styles. A width of 100% and a setting named flex-grow with a value of 1. This flex-grow setting is responsible for the unexpected bottom alignment of the menu. If you change the value to 0 (or disable flex-grow) with the browser debugger the alignment changes back to a top alignment.

A simple workaround is setting the flex-grow to 0 with the style attribute:

<MudDivider Class="mb-4" Style="flex-grow:0" />