Unnecessary horizontal scroll bar on Windows

[cloudlena]

Tables show an unnecessary horizontal scroll bar after scrolling vertically for a bit. This happens only on Windows (tested with Windows 10 and different browsers). I made a minimal example here that does show the behavior: https://codesandbox.io/s/v8z0lwvpj7

The same can be observed for some of the examples (e.g. https://techniq.github.io/mui-virtualized-table/?selectedKind=Basic&selectedStory=fixed%2Ffreeze%20row%28s%29&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel).

When visiting the site with any browser on Windows and then scrolling the table up and down a little, a horizontal scroll bar appears.

It seems to be happening mainly when scrolling back up after having scrolled down.

[cloudlena]

I was able to correct the behavior by setting the following CSS rule in my app:

.ReactVirtualized__Grid__innerScrollContainer[style] {
  width: 100% !important;
}

@techniq, can we somehow set that in the library or do you think it's the wrong approach? So far I've seen it working without any downsides.

[techniq]

@mastertinner hmm, this concerns me a little (the !important and overriding the explicit width (which is also set on the surrounding element, for example: ReactVirtualized__Grid bottomRightGrid). I think setting width: 100% also breaks frozen columns from my limited testing.

[cloudlena]

Yes, the !important flag is a good indicator that something is fishy. However, I haven't been able to come up with any other ideas yet to solve the problem. Have you been able to reproduce it? And, if so, do you have any other ideas to fix it?

[techniq]

@mastertinner I'm normally on a Mac so I haven't noticed it, but I just tried on a Windows machine and was able to reproduce.

One workaround that seemed to work for me using your codesandbox example (at least using Chrome's devtools to override the styles) was to change overflow: auto to overflow-x: hidden; overflow-y: auto

In fact, when I look at this on my Mac in Chrome, I see these being set:

but on a Windows machine in Chrome, they are not (on another machine, or I would include a screenshot).

Not sure why this is, but it appears to be the culprit and the discrepancy between OSes.

[techniq]

@mastertinner reading through MultiGrid is where this is set (I believe). Not sure if Windows is producing a different result, but I think this might be a good place to look.

I'm under some deadlines right now (and have mostly moved to using my mui-table as I typically do not render large tables and needed more css/dom capability that react-virtualized made difficult.

If you can find a good solution, I will definitely help you get it merged in, but my bandwidth is pretty limited at the moment (and sadly, has been for some time).

[techniq]

@mastertinner We are also on react-virtualized 0.9.18 but there have been some changes to MultiGrid in later versions, particularly https://github.com/bvaughn/react-virtualized/pull/1040. Might want to try to upgrade the dependency and see if this helps.

[techniq]

@mastertinner Have any luck?

[elilambnz]

I believe that this issue is caused by the calcColumnWidth util not taking into account the width of the vertical scrollbar on non-Mac browsers. Because I use this util externally, I prevent the issue by passing width - 15 to offset the vertical scrollbar width.