Datatable not taking whole width of container within dialog.

gpickney commented 6 years ago

[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 commented 6 years ago

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

PLopezD commented 6 years ago

+1

vlpasha commented 6 years ago

+1

mchoraine commented 6 years ago

+1

ivanovpavel1983 commented 6 years ago

+1

esilva88 commented 6 years ago

+1

progressify commented 5 years ago

+1

ivanovpavel1983 commented 5 years ago

as workaround we use bootstrap tabs..

michlG commented 5 years ago

+1

bardmc commented 5 years ago

+1, is there any fix in the works?

KingDarBoja commented 5 years ago

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 commented 4 years ago

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

FrancescoBorzi commented 4 years ago

confirmed in version 16.0.3

FrancescoBorzi commented 4 years ago

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

codingnut commented 4 years ago

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

This disables the width adjusting on window resize.

codingnut commented 4 years ago

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 commented 4 years ago

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

wailashraf71 commented 3 years ago

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 commented 10 months ago

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.

swimlane / ngx-datatable

Datatable not taking whole width of container within dialog. #1266