Fluentui: DetailsList unnecessary horizontal scroll

[jonathaneckman]

Bug Report

• __Package version(s)__: 5.34.3
• __Browser and OS versions__: Chrome on Windows 10

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Describe the issue:

A basic DetailsList will always add a horizontal scroll bar. There appears to be a couple of pixels being added somewhere within the ms-DetailsList element. This happens with or without ConstrainMode.horizontalConstrained.

Expected behavior:

When horizontal scrolling is not needed, there should be no scrollbar.

[jonathaneckman]

I figured out where this is coming from. I removed all items from the list so it was just a header. I see that the header cell has an inline width style of 1666px. I reduced that to 1650px and the scrollbar disappeared. This is the rendered markup of a header cell:

<div role="row" class="ms-FocusZone ms-DetailsHeader root_a3090d2b" data-automationid="DetailsHeader" data-focuszone-id="FocusZone1">
    <div role="columnheader" aria-sort="none" aria-disabled="false" aria-colindex="0" class="ms-DetailsHeader-cell cell_a3090d2b is-actionable cellIsActionable_a3090d2b cellWrapperPadded_a3090d2b" data-automationid="ColumnsHeaderColumn" data-item-key="Title" 
            style="width: 1666px;">
         <!-- content omitted -->
    </div>
</div>

I see the same inline style on all rows as well. Im not sure there is a workaround to this unless I hide overflow-x, which is a hack.

[thinkman99]

I also have this problem. But when I change the window size, the width of DetailsList is recalculated correctly. My decision:

componentDidMount() {
    window.dispatchEvent(new Event('resize'));
}

[dzearing]

@ThomasMichon can you help with this? Multiple partners are hitting this, and you can see this even in the fabric doc site. I think it is very likely related to header and resize elements consuming space.

[Basek]

still reproduce on 5.59.1

[canmenekse]

I am having the same issue in version 6.128.0 too, though a little bit different :

1. Does happen rarely in Chrome , it happens more frequently in Edge/Firefox
2. Does not happen if the vertical scrollbar is there at the beginning , only happens when
   1-) you don't have a vertical scrollbar since list does not need one yet
   2-) items get added and the list displays a vertical scrollbar
   3-) suddenly horizontal bar appears

codepen:
https://codepen.io/anon/pen/WLVdgY
kindly wait for a bit for the new groups to load, so it triggers the vertical scrollbar