CODEWITHSUNDEEP
cssangulardatatablengx-datatable
Nelson Lam
Nelson Lam

Reputation: 123

CSS issue Ngx-table angular2 swimlane

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

Upvotes: 12

Views: 7960

Answers (2)

Georgee Mathew Pappen
Georgee Mathew Pappen

Reputation: 11

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

Upvotes: 1

Joe Zeleny
Joe Zeleny

Reputation: 884

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

Upvotes: 33

Related Questions