ngx-datatable-row-detail width is fixed

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 I have a ngx-datatable with my columnMode set to ‘force’ I also have my ngx-datatable-row-detail defined with [rowHeight]=“‘auto’”

Expected behavior Overall, table works fine, I can expand row details and they initially display ok. However, if I drag the width of my browser window to be wider, the table columns and rows resize fine, however the row details remains at an inital fixed width.

How can I get my row details to be responsive in width like the rest of the table ?

Reproduction of the problem

What is the motivation / use case for changing the behavior?

I need my row details to have responsive content

Please tell us about your environment:

Windows 10, Chrome, Angular 5

• Table version: 11.2.0

• Angular version: 5.2.3

• Browser: Chrome Version 65.0.3325.181 (Official Build) (64-bit)

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

[anisabboud]

Adding this to my styles.scss mitigated the issue for me.

datatable-scroller {
    width: 100% !important;
}

[div661]

This worked for me

ngAfterViewChecked() { window.dispatchEvent(new Event('resize')) }