ngx-datatable-row-detail width is fixed

See original GitHub issue

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]

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:26
  • Comments:23 (1 by maintainers)

github_iconTop GitHub Comments

42reactions
anisabboudcommented, Oct 22, 2018

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

datatable-scroller {
    width: 100% !important;
}
2reactions
div661commented, Jan 7, 2021

This worked for me

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular ngx-datatable row-detail issues - Stack Overflow
This will force the detail row to use 100% width. However, this is just a workaround and there has been no solution provided...
Read more >
Changelog - ngx-datatable - GitBook
Bug: Fix disappearing rows with vertical scrollbar, virtual scrolling & rowdetail auto height ... Bug: do not collapse row details when row updated...
Read more >
Angular Ngx Datatable Row Grouping And Row Detail (forked)
ngx -datatable example with row grouping and row detail in the same table. ... <ngx-datatable-column [width]="50". [resizeable]="false" [sortable]="false".
Read more >
@swimlane/ngx-datatable@20.1.0 - jsDocs.io
Adjusts the column widths. Inspired by: https://github.com/facebook/fixed-data-table/blob/master/src/FixedDataTableWidthHelper.js ...
Read more >
swimlane/ngx-datatable - Gitter
The row data is fetched from an API every 60s. ... How can this be fixed? ... <ngx-datatable style="width: 100%" class="material" [rows]="rows" ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found