CSS issue Ngx-table angular2 swimlane

泪湿孤枕 提交于 2019-12-09 16:30:59

问题


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


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


来源:https://stackoverflow.com/questions/44166811/css-issue-ngx-table-angular2-swimlane

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!