WedDataGrid – Windows 11 shows no overlay scrollbars in Firefox

The WebDataGrid does not show the overlay scrollbars.

I can adjust Windows 11 settings to show the toolbars always, and then there is no problem.

Same in Firefox (after firefox restart that is) by setting ‘Widget.windows.overlay-scrollbars.enabled’ to false.
However the default in firefox and Windows 11 results in the scrollbars not showing.

<ig:WebDataGrid ID=”webdatagrid” runat=”server” ClientIDMode=”Static” HeaderCaptionCssClass=”HeaderCaptionCssClass” ItemCssClass=”itemClass” DefaultColumnWidth=”90″ Width=”100%” Height=”100%”
ViewStateMode=”Disabled” EnableAjaxViewState=”false” EnableDataViewState=”false” AutoGenerateColumns=”false” EnableAjax=”false” CssClass=”webdatagrid” Visible=”false” />

Hello Barry,

Thank you for posting to Infragistics Community!

I have been looking into your question and I understand that you are referring to the Windows 11’s Fluent scrollbars style, that can be enabled in the different browsers by setting the corresponding flags ‘overlay-scrollbars’. Please, correct me if there is a misunderstanding.

Additionally, I assume that by “settings to show the (scrollbars) always”, you are referring to setting the “Always show scrollbars” flag in the Windows Accessibility -> Visual effects settings, aren’t you?

In an effort to test the overlay scrollbars behavior for the WebDataGrid, I went ahead and set the flags in either Chrome, Firefox and Edge. On my side, the scrollbars are changed to the “overlay” style as specified by the corresponding browser flag, for example.

By the way, to “force” the style in Firefox as in Windows 11, I did also set the ‘widget.non-native-theme.win11.scrollbar.force-overlay-style’ flag to ‘true’. More about this flag can be found in this article.

So, I am afraid that by the provided description, I could not quite catch the exact situation when the scrollbars work, and when they do not. To be able to assist you, I would like to ask you to, please, provide a bit more structured details regarding the settings you are applying and their result. You could possibly attach a screenshot and also explain/demonstrate what is the expected look.

This information will be highly appreciated, so I can assist you further. Looking forward to your reply.

Best regards,
Bozhidara Pachilova
Associate Software Developer

Hi Bozhidara,

Indeed, I am referring to the Windows 11’s Fluent scrollbars style.
My settings:
Infragistics 22.1
Firefox 64x version 101.0.1
Windows Settings -> Accesibility -> Visual Effects -> Always show scrollbars = Off
Firefox -> about:config -> widget.windows.overlay-scrollbars.enabled = true

I have a dummy website with the webdatagrid as the only, fullscreen element.
Then both the horizontal and vertical scrollbars work as they should.

 

But I want to use the webdatagrid as part of the screen, more like this sample:
http://www.infragistics.com/…/binding-to-datatable

When I open this sample site on Windows 10 in Firefox. I get a vertical scrollbar.

 

Opening this sample site on Win11 in Firefox, then there is no vertical scrollbar.

 

And yes there are workarounds:
– changing the win11 setting “Always show scrollbars” to On
– OR changing the firefox setting widget.windows.overlay-scrollbars.enabled to false.

Hope this clarifies my question?
I don’t want to use the workarounds, and need both a vertical and horizontal scrollbar when using the webdatagrid as part of the screen instead of being full screen.

Kind regards.

Hi Barry,

Thank you for clarifying the configured settings and providing examples!

With this insight, I am able to reproduce the overlay scrollbars not appearing in the WebDataGrid samples in Firefox with the default settings. In Chrome and Edge, overlay scrollbars are not enabled by default, as they are an experimental feature, so the grid displays the ‘standard’ scrollbars, similar to the gif demonstrating the behavior in Firefox in Windows 10.

This led me to the thought that the overlay scrollbar not appearing might be an issue with the sample’s container. Moreover, when testing in the small sample with a WebDataGrid that I also showed in the gifs in my previous reply, scrollbars were rendered in Firefox with the default settings and without the grid being “full screen”.

After inspecting the elements, I determined that one of the parent containers has its “overflow” css property set to “hidden”. This seems to interfere with the overlay scrollbars, thus they are not shown. It might also explain why you are after all seeing the scrollbars in your own project. I am wondering if you had the chance to test it without the grid being full screen? Attached you will find my test sample for reference.

 

Please, keep me posted on your progress.

Best regards,
Bozhidara Pachilova
Associate Software Developer

8765.WDG.zip