DetailsList rowWidth added on detailsHeaderProps broke fullwidth list layout

[kennyoctopus]

Environment Information

• Package version(s): 7.11.0
• Browser and OS versions: Chrome
• Revision: 5b8005c7dd8dcff9bc4c3d46550a0e02a7885199

DetailsList rowWidth added on detailsHeaderProps broke fullwidth list layout:

This line was added: rowWidth: this._sumColumnWidths(this.state.adjustedColumns) and since, the component with the class name ms-DetailsRow have a dynamically added min-width attribute which is not equal 100% of the parent container (which is 100% of its parent, as expected) since its based on the sum of all columns width. This break the layout because the border-bottom line is not 100%

ACTUAL

EXPECTED

Hackish fix:

const StickyHeader = (detailsHeaderProps, defaultRender) => {
  detailsHeaderProps.rowWidth = '100%'; // <--- THIS FIX the issue

  return (
    <Sticky stickyPosition={StickyPositionType.Header}>
      {defaultRender(detailsHeaderProps)}
    </Sticky>
  );
};

[KevinTCoughlin]

@kennyoctopus, apologies for the friction.

My understanding after having worked on this is that DetailsListLayoutMode.fixedColumns was intended to render columns with a "fixed" width, not to fill the DetailsList contents. This is the layout mode SharePoint uses. However, it was filling its contents by chance due to bugs in the render path of DetailsList. Related PR: https://github.com/OfficeDev/office-ui-fabric-react/pull/9343.

DetailsListLayoutMode.justified on the other hand is intended to render rows columns which fill their parent i.e. the OneDrive scenario.

Can you try using DetailsListLayoutMode.justified as your layoutMode? Does it fix the UI regression you're seeing?

I mention the above in https://github.com/OfficeDev/office-ui-fabric-react/pull/9565#issuecomment-506924728.

[kennyoctopus]

It does fix the layout problem, but using the justified mode cancel the overflow-x (until extremes). So when there are lots of columns instead of rendering an overflow with a scroll bar, it ajusts the width of each column to fit the viewport, which is a problem for us as we can have 15+ columns and now some columns and unpracticable.

  /**
   * Manages which columns are visible, tries to size them according to their min/max rules and drops
   * off columns that can't fit and have isCollapsible set.
   */

This cannot be applied in our case, all columns need to be visible with the width the user intended even if it means rendering a scrollbar* on the X axis.

*In our case the scrollbars are handled with ScrollablePane

[msft-github-bot]

Hey Assigned Owner, just wanted to gently ping that this issue needs attention. If you've already taken a look, make sure to remove the "Needs: Attention" and "Status: No Recent Activity" labels so that I can be aware. Thank you!

[msft-fluent-ui-bot]

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

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