Open mlallan1307 opened 6 years ago
I also have the same problem: datatable-scroll width is set as the table was full width. I can avoid that with some awful css like
/deep/ .modal-with-table-wrapper {
.datatable-scroll {
width: 100% !important;
}
}
But both before and after the fix I still have a major problem that is the datatable doesn't understand the width of the rows (ng-reflect-inner-width
is set to a lower value than it should be - see the image).
Have you had the same problem? Any ideas?
I had this issue inside a ng-modal, so I got the instance of my component on ngAfterViewInit and edited the width using the element property:
import { DatatableComponent } from '**@swimlane/ngx-datatable';**
@ViewChild(DatatableComponent, { static: false }) dataTable: DatatableComponent
ngAfterViewInit() {
//In this case I need the component instance for edit the with style inside a ngmodal issue
this.dataTable.element.querySelector('.datatable-scroll').setAttribute('style', 'width:100%');
}
I'm submitting a ... (check one with "x")
Current behavior
Using ngx-datatable inside of a ng-bootstrap modal causes oversized "datatable-scroller" where it is larger than datatable-row-wrapper so there is blank space on the right. Works with bootstrap modal but not ng-bootstrap modal.
Expected behavior
The datatable-scroller should not be larger than datatable-row-wrapper.
Reproduction of the problem
Install ng-bootstrap https://github.com/ng-bootstrap/ng-bootstrap Put ngx-datatable in a modal that is opened using ng-bootstrap
What is the motivation / use case for changing the behavior?
Incompatibility with popular library for angular bootstrap. Expect table to work in modal.
Please tell us about your environment:
Redhat, npm, localhost
Table version: 0.8.x
ngx-datatable: "13.0.1" ng-bootstrap: "2.1.1"
Angular version: 2.0.x
6.0.3
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 ]
firefox, (no others checked)
Language: [all | TypeScript X.X | ES6/7 | ES5] all