Invisible overflow in FluentGrid with large content which exceeds the content container

[MarvinKlein1508]

🐛 Bug Report

When using a FluentGrid and it contains so much content that the div content is being exceeded there is a nasty bug when scrolling because there are two seperate overflows created.

I've tested it with FluentStack as well and with this component it works just fine.

In my case I have a grid with 2 columns. The first column displays a list of data and the second column displays a filter area.

💻 Repro or Code Sample

I've created a small sample repo and a small video which showcases the bug. https://github.com/MarvinKlein1508/fluent-ui-scroll-bug https://www.youtube.com/watch?v=sqAVsGUZavs

🤔 Expected Behavior

I would expect only one scrollbar to appear.

😯 Current Behavior

You will have two scrollbars.

💁 Possible Solution

I'Ve added overflow: hidden to .content which fixes this issue for me. However this solution isn't great because it will break other things then. For example when you use a FluentSelect which displays many items.

🔦 Context

I've just updated my templates to the latest version.

🌍 Your Environment

Mozilla Firefox

[vnbaaij]

For the demo you provided, I solved it by changing Home.razor line 6 to

<FluentGrid Style="overflow: hidden;">

This gives you 1 scrollbar for the whole window

I don't think this is a component issue. We provide Style and Class parameter to 'tweak' things. Also, the template is just a starter. It is not an end-all-solve-all thing. You should be able to use the components fully without or with addapted <div class="content">

Another solution is to do what we do In the demo site where we change the height of the body-content element:

(needs to be -86px for template site) This gives you a scrollbar that just scrolls the right (content) part

[StephenOTT]

You have to add bottom padding as well on things like cards or else the shadow gets cut off.

Adding overview:hidden to ~most FluentGrid uses seems like a implementation issue.

By default if someone cannot get the base template and add a Grid to the home page, it seems like this will just create more tickets/issues logged as people need to re-tweak on every use of fluentGrid (which would be a reasonably the majority of pages)

@vnbaaij maybe less of a component issue, and more of a template issue

[vnbaaij]

@StephenOTT My second suggestion/solution works without adding any padding anywhere. It is als obetter than the first because it makes the header 'sticky'

[MarvinKlein1508]

@vnbaaij thanks for your reply. I would still encourage you to change the template for this.

This might be really confusing for new people which try out FluentUI for the first time. Especially when you think that the template works just fine out of the box.