Incompatibility with ng-bootstrap modal

[mlallan1307]

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

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

[damn1]

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?

[hernanBeiza]

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%');
}