targetWidthProportion on DetailsList is not properly working

[tomsato-ms]

Environment Information

• Package version(s): latest version
• Browser and OS versions: Chrome

Please provide a reproduction of the bug in a codepen:

https://codepen.io/tomothehiro/pen/mdWXKev

Actual behavior:

targetWidthProportion is not taken into consideration when generating the width.

Expected behavior:

targetWidthProportion should distribute the width of the column in proportion to the number given as described here

Please refer to the codepen above, but when same minWidth and targetWidthProportion are given to all 4 columns, it does not distribute the column width equally. Instead, it seems like width of 70 is given to the last 3 columns, and all the remaining width is given to the first column

        minWidth: 70,
        targetWidthProportion: 1,

I don't think minWidth should be a required field, but instead have users be able to provide either the minWidth or the targetWidthProportion to determine the column width.

Priorities and help requested:

Are you willing to submit a PR to fix? (No)

Requested priority: (High)

Products/sites affected: (Azure Portal)

[tomsato-ms]

Also, documentation has a typo in line 372, it should be 3/4 not 2/4

   * have widths of 1 and 3, they will respectively occupy (1/4) = 25% and (2/4) = 75% of the remaining space. Note that

[gouttierre]

@tomsato-ms - thanks for filing this issue and providing the details for the repro.

@miroslavstastny - Would you be able to confirm if this is a regression, or if this behavior is an issue? Also, could we confirm the documentations is correct as pointed out by @tomsato-ms. Thanks

[BerserkerDotNet]

@tomsato-ms @gouttierre @miroslavstastny, Looking at the PR that introduced this change I can see that targetWidthProportion is not used, instead there is flexGrow with exactly the same comment (without a typo ;)) and it works as expected if layout mode is set to fixed columns. layoutMode={DetailsListLayoutMode.fixedColumns}

Additionally, DetailsListProportionalColumnsProps is also not used anywhere, that is why there is no entry in the examples for this feature.

[ling1726]

@tomsato-ms Does the property proposed by @BerserkerDotNet mitigate your issue ?

[tomsato-ms]

@ling1726 flexGrow does not mitigate the issue. I tested the property on my CodePen, but same issue is still happening where width are not distributed equally to all columns. It's still giving minWidth to the last 3 columns, and all the rest of the width to the 1st column.
https://codepen.io/tomothehiro/pen/mdWXKev

[BerserkerDotNet]

@tomsato-ms, change the layoutMode from justified to fixedColumns. flexGrow does not work with justified layout.

[tomsato-ms]

I see, it does work with the layoutMode: fixedColumns and flexGrow
Thanks, I will close the issue.

[BerserkerDotNet]

@tomsato-ms glad I could help.

@ling1726 I still thin k there are things to fix as part of this issue:

1. Remove targetWidthProportion field as it is not used and misleading
2. Update the docs and include samples for the flexGrow as they are not currently listen in the samples website