Fluentui: DetailsList: sometimes isMultiline style doesn't work accidentally

[nekoya]

Sometimes the content in a cell displays on single line and some of them are hidden in spite of enable isMultiline.

expected

in case of hidden content.

I didn't encounter the situation like that before v6.27.0. I suspect that CSS priorities are not ideal in some cases.

Nowadays, DetailsList is implemented by CSSinJS, placed packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts.

Besides, in the former version (v6.27.0), these styles are declared at DetailsRow.scss.

Classes are declared at DetailsRow.styles.ts as JavaScript object form, order of the properties are not declarable. Is it affects these cases?

HTML elements has suffixed class names like 'cell-175' in actual, thus my prediction may misunderstanding.

Does anyone encountering this stuation?

In addition, I met circumstances like this when I replace the content dynamically through XHR. Class name like cell-XXX changed dynamically too.

I found the workaround, remove whiteSpace: 'nowrap' from defaultCellStyles, then the contents shows as expected. However this approach is not ideal of course.

[kenotron]

I really cannot repro this. I've modified an example here locally to dynamically force update the details list item contents in a multiline column. I simply cannot see this case where the content is being clipped.

The css() call in DetailsRowFields is probably at play here, but it would have ordered the cell class names in a predetermined order. I'm closing this for now, please re-open with a minimal repro.

[kanufy]

Your web site occurs same problem, too.

It seems isMultiline-XXX CSS is overwritten when click.

my browser : chrome 67

[nekoya]

The preceding screenshot by @kanufy seems a real example of repro, though it isn't minimum one.

@kenotron Could you confirm this behavior?

[kenotron]

So, @Jahnp, can you publish a new update to the website? I don't see this repro locally at all. The fabric-website AND demo sites both do not exhibit this behavior (can you make sure the mergestyles version is updated as well?)

[KevinTCoughlin]

For linking this should have been fixed w/ #5930, with this line https://github.com/OfficeDev/office-ui-fabric-react/pull/5930/files#diff-39279b6555df6a42c15227ace56e979dR319

[Jahnp]

Yes--I've been trying to get the site updated the last few days, but there've been issues deploying due to a stalled agent queue. That seems to be resolved now, and I've got another update queued up. I should have an update on this in a few hours.

[kanufy]

In firefox(61.0.1), I face to this problem, too.

my operations are

• Open implementation in fabric website docs ( because used DetailsList)
  
  
  
  • ex. https://developer.microsoft.com/en-us/fabric#/components/detailslist#Implementation
  
  
• Click rows having long content in multiline
  sample↓
  

if I do this action, rows does not display multiline.
In short, rows display only a part.

Concrete Troubles

• I can't copy the row having multiline long content
• I feel visual confusion

[micahgodbolt]

Normally the styles look like this.

Selecting the cell changes the styles to this (i turned off whitespace in this example, it is what's causing the break).

specifically the white-space value.

[micahgodbolt]

Fixed by #5930