Angular - Override CSS of swimlane/ngx-datatable
Solution 1
Keep default component encapsulation and use ng-deep
:host ::ng-deep .datatable-body-cell {
padding: 0 !important;
}
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Solution 2
You could try to do a prefixing/isolation of the css code. That means put e.g. a DIV around the component you want to set a different style and give that DIV a class (prefix-css).
.prefix-css .datatable-body-cell {
padding: 0 !important;
}
.prefix-css .datatable-header-cell {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
The HTML code then looks somehow like that:
<div class="prefix-css">
... here the code for your datatable
</div>
You can make that styles global and then just affect code inside of the div with the class 'prefix-css'.
Look at this example: https://stackblitz.com/edit/angular-qlkcs3
Moriz Martiner
Updated on July 22, 2022Comments
-
Moriz Martiner almost 2 years
I need to remove the padding from ngx-datatable header cells and body cells.
My actual solution looks like this:
.datatable-body-cell { padding: 0 !important; } .datatable-header-cell { padding-top: 0 !important; padding-bottom: 0 !important; }
calendar.component.scss
@Component({ templateUrl: './calendar.component.html', styleUrls: ['./calendar.component.scss'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, })
calendar.component.ts
The problem I encountered is that I need to disable the ViewEncapsulation override the ngx-datatable CSS classes datatable-body-cell and datatable-header-cell. Since I use the ngx-datatable in other components as well, the CSS remains overridden when I navigate to the other components. Only when I refresh the CSS in the other components is shown as it should.
Are there any other possibilities to override CSS of a library in a component without affecting the other components?
I'm using Angular 5.
-
Moriz Martiner almost 6 yearsThanks, it works! I thought of using
::ng-deep
as well, but isn't it deprecated and aren't they removing the support of::ng-deep
from browsers? -
David almost 6 yearsThey are not going to remove it until they find a replacement, and there is none for now
-
Moriz Martiner almost 6 yearsThis would probably work as well although I prefer to have the component styling in the component CSS file...
-
Saxophonist about 5 yearsIt saved me some time! Thanks.
-
marko over 4 yearsThis is nice! Thanks a lot.
-
user7364588 over 4 yearsIs it still relevant with angular 7 and ngx-datatable >= 14.0.0 ? Does anyone make it work with this version ?
-
kuldeep over 3 years@David i just tried with angular 9 and ngx-datatable and it works fine ! Not sure if this is going to break in future because of ng-deep depreceated ?
-
David over 3 yearsThis will likely break in the future, but for now there is no replacement. Other option is to put rulea in
styles.scss