CSS issue Ngx-table angular2 swimlane

Viewed 6754

I am currently having issues with getting the ngx-datatable to have the proper css. I have this within my css file to import the proper css.

@import '@swimlane/ngx-datatable/release/index.css';
@import '@swimlane/ngx-datatable/release/themes/material.css';
@import '@swimlane/ngx-datatable/release/assets/icons.css';

It seems to only be doing half of what it is suppose to do. This is the section of my html calling upon the library.

  <ngx-datatable  class="material striped"
    class="material"
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="100">
  </ngx-datatable>

If anyone has any idea why this is happening it would be really helpful.

@amcdnl any clues, sorry for bothering you if you read this

CSS Issue

2 Answers

encapsulation: ViewEncapsulation.None is required. But even after adding it, it was not working for me. Not sure if my package installation was incomplete.

I had to update angular.json as below:

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "node_modules/@swimlane/ngx-datatable/index.css",
          "node_modules/@swimlane/ngx-datatable/themes/material.css",
          "node_modules/@swimlane/ngx-datatable/assets/icons.css"
        ],
Related