Datatable not taking whole width of container within dialog.

[gpickney]

[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 opening a tabbed dialog (Angular Material), an ngx-datatable on the default tab is horizontally cut off only on the header and table body... the footer extends the whole space. When the page size is changed at all (resizing, opening console, etc), the table then fills the space. This only occurs on the first tab.

Expected behavior The datatable(s) in the first tab would take up all available horizontal space upon load.

Reproduction of the problem

What is the motivation / use case for changing the behavior? To avoid using an Angular Material table, which does not exhibit this behavior.

Please tell us about your environment: "dependencies": { "aws-sdk": "^2.184.0", "bootstrap": "^3.3.7", "core-js": "^2.5.1", "jquery": "^3.2.1", "rxjs": "^5.5.2", "zone.js": "^0.8.18" }, "devDependencies": { "codelyzer": "^3.2.2", "ts-node": "^3.3.0", "tslint": "^5.8.0", "typescript": "2.5.3" }

• Table version: 11.1.7

• Angular version: 5.2.2

• 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]

TypeScript 2.5.3

[gpickney]

Bumping for visibility. This did not occur in previous versions of ngx-datatable. Would be great if someone had some insights?

[PLopezD]

+1

[vlpasha]

+1

[mchoraine]

+1

[ivanovpavel1983]

+1

[esilva88]

+1

[progressify]

+1

[ivanovpavel1983]

as workaround we use bootstrap tabs..

[michlG]

+1

[bardmc]

+1, is there any fix in the works?

[KingDarBoja]

Can someone provide a working stackblitz demo in order to check the issue? I am too lazy to make one... But willing to help!

[husainsr]

Same issue occurs while opening in the Material Dialog. Can anyone suggest the workaround for the same ?

[FrancescoBorzi]

confirmed in version 16.0.3

[FrancescoBorzi]

for some reasons, the following seems to mitigate the issue for me:

[codingnut]

for some reasons, the following seems to mitigate the issue for me:

This disables the width adjusting on window resize.

[codingnut]

https://github.com/swimlane/ngx-datatable/issues/923

You just need to trigger window resize event in the component of the table.

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

[memartinez06]

Thank you @codingnut , adding that method to my component, the issue was solved!

[wailashraf71]

Well, making a resize event is really helpful, but in my case, I'm using reveal animation so the resize is just breaking it :( any real solution?

[jonathanrace77]

Changing the animation time to 0 in the config works (seems the issue is that the table is sizing to the initial width at the start of the animation and then gets stuck there which is why resize works).

However, now I'm faced with the issue of using this for this 1 case or changing all 50 modals or so to use no animation on enter.