[DetailsList] Horizontal scroll bar not available

[flyingbee2012]

I generated a table using DetailsList where it has lots of columns. When I resize the window, the rest of the columns are clipped. So, I'd like to apply a horizontal scroll bar, but it seems there is a limitation to do so with DetailsList. As a result, I am unable to see the all columns if I resize the window.

Environment Information

• Package version(s): DetailsList
• Browser and OS versions: Chrome, Windows 10

Please provide a reproduction of the bug in a codepen:

https://codepen.io/flyingbee2012/pen/gOLOMbW

Actual behavior:

After applying "overflow: auto" in css, the horizontal scrollbar only applies to the column header instead of the whole list

Expected behavior:

The horizontal scrollbar should apply to the whole list.

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/sites affected: OWA

[rcbevans]

Your codepen running in Firefox on MacOS shows an issue where the header and body of the DetailsList are scrollable, but scroll independently and the body scrollbar doesn't seem to appear.

It is caused by the css:

div {
  overflow: auto;
}

Removing this the, header and content scroll together and the scrollbar appears just fine.

[flyingbee2012]

Thanks. After I removed this, I did see the horizontal scroll bar at bottom, but it only shows when I drag the vertical bar to the very bottom. Is there a way to show horizontal bar as long as the width exceeds the limit so that I don't need to scroll to the bottom in order to use it?

I increased the number of items to 100, as you can see, I cannot use the horizontal bar unless it reaches the bottom of the page https://codepen.io/flyingbee2012/pen/gOLOMbW

[gouttierre]

@flyingbee2012 - thank you for the feedback.

I see the problem you experiencing, if you open your codepen, start scrolling down the DetailsListand change the browser window size (smaller), the DetailsListhorizontal bar only becomes visible once you reach the last row in the Listand then it disappears as you scroll up.

@khmakoto - Would you be able to if this is a regression or if this behavior is an issue? cc @smhigley

[flyingbee2012]

@gouttierre @layershifter Just checkin. I am wondering if you are looking into this issue. We have an accessibility bug in OWA of which the fix is dependent on this issue. Kindly let me know if there is an ETA or workaround. Thanks!

[schutztj]

@khmakoto The issue here is that overflow-x is being applied on the .ms-DetailsList div. This div is sized based on the entire content of the list and not the virtualized viewport. Overflow-x needs to be set on a div that is sized based on the virtualized view and not the entire content to work properly. Alternatively, there is no need to set overflow-x at all since the list does not virtualize in the horizontal plane and consumers could simply configure their overflow behavior on a parent container of the list.

@flyingbee2012 You can work around this issue by setting overflowX: unset on the root style for the list. I'm not sure if this has other unintended consequences though.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

[hunterboerner]

I've come across this issue as well. The horizontal scroll bar is only visible when you reach the bottom of the list. This seems like a bug.

[khmakoto]

@hunterboerner do you want me to reopen this issue?

[davidritch1996]

Chiming in here, same issue with horizontal bar only being visible when scrolled down. It would be helpful to reopen the ticket and fix this. We recently received an accessibility ticket related to this as well, as when zoomed in on the browser 400% it was practically impossible to scroll right and keep track of which list item is being looked at.

[timbellay]

While this seems like a low-medium severity accessibility bug, the concern here is that these types of bugs can easily kill feature adoption because they tend to make data rich apps painful to use to pull out insights.

The expected behavior is that one would see a horizontal scroll bar before reaching the end of the list (i.e. pinned to bottom on visible part of control) so that users can scroll the rows to see additional column information easily.

Currently users with large lists have to 1) scroll to the bottom (could be 1000's of rows, or worse require pagination and loading), 2) guess how far to horizontal scroll (pertinent information in different columns may not fit on screen at same time) and then 3) vertically scroll back to the rows they need to scan for (could be hundreds of row).

[Nic-Nitro5]

I currently am experiencing the same issue regarding this. Was there ever a solution here?

[noumanfarooq566]

is there any solution for this?

[Nic-Nitro5]

There has been some time since I last worked on this bug but if I remember correctly as mentioned above was the fix for me.

div { overflow: auto; }

Changes to

div { overflow: unset; }

I injected a class to the parent of the affected area and targeted it as below:

.new-class div { overflow: unset; }

I hope this helps you.

[noumanfarooq566]

thanks @Nic-Nitro5

[Dissident26]

Not sure if it helps, but I've managed to deal with it by setting the corresponding prop

[spmonahan]

Not sure if it helps, but I've managed to deal with it by setting the corresponding prop ...

I believe this is the correct solution.

I'll update the docs to note this.

[msft-fluent-ui-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!