CSS issue Ngx-table angular2 swimlane

Question

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

Answer 1

I assume it has to do with view encapsulation. Basically your css will be scoped with an attribute like [_ngcontent-c5], because elements inside of your template will automatically have that.

However items added to the dom by datatables probably doesn't have that attribute causing the styles to do nothing.

You can fix that by adding the option encapsulation: ViewEncapsulation.None to your component like so:

import { ViewEncapsulation } from '@angular/core';
@Component({
  [...] // other code like template and style urls
  encapsulation: ViewEncapsulation.None
})