馃悰 Bug Report
The FluentAppBar overflow menu is not visible on small screens because it
is positioned outside the viewport.
馃捇 Repro or Code Sample
A ready-to-run reproduction is available here:
https://github.com/matteoparlato/AppBarRepro2
Steps to reproduce
- Clone the repository:
https://github.com/matteoparlato/AppBarRepro2
- Run the application.
- Open the browser DevTools.
- Toggle the Device emulation.
- Select an iPhone device template (for example, iPhone SE/12/13).
- Click the overflow (
...) button.
馃 Expected Behavior
The overflow menu should be displayed entirely within the visible viewport.
On small screens, the menu should automatically adjust its position when
there is not enough space around the overflow button, so that all collapsed
FluentAppBarItem elements remain visible and accessible.
馃槸 Current Behavior
When using an iPhone device template in Edge DevTools, the overflow menu is
positioned outside the visible viewport.
As a result, the overflow menu is not visible and the collapsed
FluentAppBarItem elements cannot be accessed.
The issue can be reproduced with RC4.
RC5 is currently affected by a different AppBar issue (#5214), so RC4 is
used for this reproduction.
馃拋 Possible Solution
The overflow menu should take the available viewport space into account when
being positioned.
The popover positioning should prevent the overflow menu from being rendered
outside the visible viewport on small screens.
馃敠 Context
We use a horizontal FluentAppBar as a bottom navigation/action bar on
small screens.
When there are more items than can fit horizontally, the overflow menu is
required to provide access to the remaining actions.
On mobile-sized viewports, the overflow menu can be positioned outside the
viewport, making the collapsed actions inaccessible.
馃實 Your Environment
OS & Device: Microsoft Windows 10.0.26200 (X64)
Browser: Microsoft Edge / Google Chrome
.NET and Fluent UI Blazor library Version: .NET 10.0.11 / Fluent UI Blazor RC4 5.0.0-rc.4-26180.1
馃悰 Bug Report
The
FluentAppBaroverflow menu is not visible on small screens because itis positioned outside the viewport.
馃捇 Repro or Code Sample
A ready-to-run reproduction is available here:
https://github.com/matteoparlato/AppBarRepro2
Steps to reproduce
https://github.com/matteoparlato/AppBarRepro2
...) button.馃 Expected Behavior
The overflow menu should be displayed entirely within the visible viewport.
On small screens, the menu should automatically adjust its position when
there is not enough space around the overflow button, so that all collapsed
FluentAppBarItemelements remain visible and accessible.馃槸 Current Behavior
When using an iPhone device template in Edge DevTools, the overflow menu is
positioned outside the visible viewport.
As a result, the overflow menu is not visible and the collapsed
FluentAppBarItemelements cannot be accessed.The issue can be reproduced with RC4.
RC5 is currently affected by a different AppBar issue (#5214), so RC4 is
used for this reproduction.
馃拋 Possible Solution
The overflow menu should take the available viewport space into account when
being positioned.
The popover positioning should prevent the overflow menu from being rendered
outside the visible viewport on small screens.
馃敠 Context
We use a horizontal
FluentAppBaras a bottom navigation/action bar onsmall screens.
When there are more items than can fit horizontally, the overflow menu is
required to provide access to the remaining actions.
On mobile-sized viewports, the overflow menu can be positioned outside the
viewport, making the collapsed actions inaccessible.
馃實 Your Environment
OS & Device: Microsoft Windows 10.0.26200 (X64)
Browser: Microsoft Edge / Google Chrome
.NET and Fluent UI Blazor library Version: .NET 10.0.11 / Fluent UI Blazor RC4 5.0.0-rc.4-26180.1