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

Astragalus

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
})

Abound

That worked like a charm! Thank you so much! Heads up for anyone else that doesn't know much like me remember to import {ViewEncapsulation} from '@angular/core' – Astragalus

I wasted my entire day because of this issue... You are a savior! – Haematogenous

this is the most dummiest thing I have ever seen in a component – Plaice

Answer 2

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"
        ],

Refined