fix: FluentAppBar hiding items randomly and pop-over looks broken in Blazor (hybrid and PWA) app
nd1012 opened this issue · comments
🐛 Bug Report
I want to use the FluentAppBar as menu in the MainLayout.razor. For this I use a horizontal FluentStack to wrap the FluentAppBar and a FluentBodyContent element, which shows the body. The menu has 3 items, which is way less than the available space, so I assume that none of the items should be hidden per default. But one or two items, sometimes ALL items are being hidden and only accessable by clicking "..." to open the pop-over. The pop-over does not fit well into the view, the top is overflowing out to the top of the window, and the items are not being displayed properly (it seems they are overlayed), so it's only possible to reach one item. Also if only one item is hidden, in the pop-over it looks like another item is behind the hidden item.
💻 Repro or Code Sample
You can find the whole Visual Studio 2022 solution here: https://github.com/nd1012/wan24-I8NGUI
This is the current MainLayout.razor:
@inherits LayoutComponentBase
<FluentDesignTheme StorageName="theme" />
<FluentStack Orientation="Orientation.Horizontal"
HorizontalAlignment="HorizontalAlignment.Left"
VerticalAlignment="VerticalAlignment.Top"
Style="width: 100%; height:100%">
<FluentAppBar Style="width: 100px; height:100%;">
<NavMenu />
</FluentAppBar>
<FluentBodyContent Style="height: 100%">
@Body
</FluentBodyContent>
</FluentStack>
<FluentToastProvider />
<FluentDialogProvider />
<FluentTooltipProvider />
<FluentMessageBarProvider />And the NavMenu.razor:
<FluentAppBarItem
Href=""
Match="NavLinkMatch.All"
IconRest="HomeIcon()"
IconActive="HomeIcon(active: true)"
Text="@_("Home")" />
<FluentAppBarItem
Href="counter"
Match="NavLinkMatch.All"
IconRest="CounterIcon()"
IconActive="CounterIcon(active: true)"
Text="@_("Counter")" />
<FluentAppBarItem
Href="weather"
Match="NavLinkMatch.All"
IconRest="WeatherIcon()"
IconActive="WeatherIcon(active: true)"
Text="@_("Weather")" />
@code {
private static Icon HomeIcon(bool active = false)
=> active
? new Icons.Filled.Size24.Home()
: new Icons.Regular.Size24.Home();
private static Icon CounterIcon(bool active = false)
=> active
? new Icons.Filled.Size24.ArrowCounterclockwise()
: new Icons.Regular.Size24.ArrowCounterclockwise();
private static Icon WeatherIcon(bool active = false)
=> active
? new Icons.Filled.Size24.Cloud()
: new Icons.Regular.Size24.Cloud();
}The project is a very early prototype and seems to have a bug in the Hybrid Blazor project wan24-I8NGUI, which prevents the app from loading the MAUI GUI randomly (simply stop the debugger and restart debugging, if that happens). But you can also run the wan24-I8NGUI Web project, it's a Blazor PWA app.
🤔 Expected Behavior
I assumed that all items should be visible in the FluentAppBar, since the height is at 100%, and the view actually has space for displaying many more items without having to hide anything in the pop-over.
I also assumed the pop-over to look as nice as seen here: https://www.fluentui-blazor.net/AppBar
😯 Current Behavior
The FluentAppBar hides items randomly, even here's enough space to display all.
The pop-over display looks completely broken in my app.
By hitting F5 sometimes all items are hidden, sometimes one, sometimes two - but never all items are visible.
💁 Possible Solution
I'd say I'm a bloody beginner with ASP.NET, Blazor and FAST - not sure, if I'm a great help...
🔦 Context
I want to use FAST in a Blazor Hybrid app, and also in a Blazor PWA app. There I want to use the FluentAppBar as main menu in the MainLayout.razor.
🌍 Your Environment
- OS & Device: Windows 10 Pro 22H2 on 64bit PC
- Browser WebView2 and Edge
- Version WebView version 2, Edge version 122.0.2365.80 (official build) (64-Bit)
- Visual Studio 2022 Community 17.10.0 Preview 2.0
- Blazor Hybrid and PWA app using .NET 8
@vnbaaij looms like this may be specific to the Fluent Blazor implementation. Let me know of so and I can transfer the issue.
@chrisdholt Sorry, I didn't see that there's a separate fluentui-blazor repository yet...
@chrisdholt Sorry, I didn't see that there's a separate fluentui-blazor repository yet...
No worries - we can transfer it over. Just want to get eyes on it to confirm :)
Yup, this one is for us. Please transfer!
After setting widths and heights of parent elements and the app bar itself to fit the apps viewport, all items are showing, and the pop over button is gone. Something seems to be wired with the automatic moving of the items into the pop over:
With too many items the page starts to scroll, 'cause the overflowing apps won't be hidden properly. This is a screenshot from the dev branch (https://github.com/nd1012/wan24-I8NGUI/tree/dev) now. The pop over items also seem to overlap the search bar.
You are using a FluentStack in your MainLayout.razor with a height of 100%. The stack is using display: flex so 100% height then equals the height the biggest part of the stack and ** NOT** the total height of the app frame. In this case the height is determined by the body content. See the image below. In this situation there is not nough space for the app bar items
(You can use F12 to show Dev Tools in a Hybrid app)
It can easily be solved by setting the height of the stack to somethng like 100vh or 100dvh:
On the AppBar itself, you only need to set a height. Setting a witdh is what causes the issues in the popover.
Thank for your answer!
It can easily be solved by setting the height of the stack
Yes, that's one thing that I've done in the dev branch (link above) already. First I added the class h-100, but when I change it to vh-100 it seems to get better (no scrolling anymore).
Setting a witdh is what causes the issues in the popover
In the dev branch I already removed the width, but as soon as I open the pop over, I have scrollbars and the pop over contents still look like this:
It looks like that because you are still using the Bootstrap css (linked from index.html)
Oh, ok, that explains something. I wasn't aware that for Fluent-UI I should remove Bootstrap. Thanks again!
You don't 'have to' but in some situations it might lead to clashes like this one