CSS问题Ngx-table angular2泳道 [英] CSS issue Ngx-table angular2 swimlane

问题描述

我目前在使ngx-datatable具有正确的CSS时遇到问题.我的css文件中有此文件，可以导入正确的css.

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';

似乎只完成了应做的一半.这是我的html调用库的部分.

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 任何线索，对不起，如果您阅读本文，会打扰您

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

CSS问题

推荐答案

我认为它与视图封装有关.基本上，css的作用域将是[_ngcontent-c5]之类的属性，因为模板内的元素会自动具有该属性.

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.

但是，由数据表添加到dom的项目可能没有该属性，导致样式不起作用.

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

您可以通过添加封装选项:ViewEncapsulation.None来解决此问题，如下所示:

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

这篇关于CSS问题Ngx-table angular2泳道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！