Ngx-datatable: Ngx-Datatable does not wrap text when [scrollbarV]="true"

[seanmt13]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
When setting [scrollbarV]="true" and [rowHeight]="getRowHeight" text is not wrapping in the row even though the height of the row is large enough for it to wrap. Currently my getRowHeight function just returns 500.

Expected behavior
I would expect that as long as the row height is large enough the text should wrap inside the row. It currently does this if you set [rowHeight]="auto" and [scrollbarV]="false". I would expect that it should also work when enabling the scrollbarV.

Reproduction of the problem
[columnMode]="'standard'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="500"
[selected]="selected" [scrollbarV]="true" [limit]="10">

Please tell us about your environment:
windows, npm, using ng serve

• Table version:
  13.1.0

• Angular version:
  5.2.9

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  all

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  all

[swatghc]

Same issue.

[grvv]

any fix?

[chrisfink87]

Same here.... did you solve this somehow?
Is there no fix? No workaround?

[masscrx]

+1

[tz925]

+1

[jsnelcer]

+1

[kmontalvo3]

Try adding this to your CSS

.ngx-datatable.material {
overflow-wrap: break-word;
}

[michelle-sokolov]

Try adding this to your CSS

.ngx-datatable.material {
overflow-wrap: break-word;
}

This worked perfectly once I changed my rowHeight to 'auto'

[BigPackie]

Try adding this to your CSS
.ngx-datatable.material {
overflow-wrap: break-word;
}

This worked perfectly once I changed my rowHeight to 'auto'

Thanks, this worked for me.

I also wanted to have auto header height, so I set [headerHeight]="$any('auto')"

You might have an incompatible type (if using strict template checking), that's why the $any() function wrapper, cause headerHeight expects number.