ASP.NET Core & Angular 6.9.1
I have a few pages where i want to override the datatable style to use smaller fonts and borders. So i have created a (therapist-year-stats.component.less) file with:
` #therapist-stats .primeng-datatable-container .ui-table table th, .primeng-datatable-container .ui-table table td { overflow-wrap: normal; font-size: 12px; border: 1px solid #c8c8c8 !important; }
.ui-table table td {
text-align: right;
}
In the ts file of the component i have:
@Component({
templateUrl: './therapist-year-stats.component.html',
encapsulation: ViewEncapsulation.None,
animations: [appModuleAnimation()],
styleUrls: ['./therapist-year-stats.component.less']
})
`
And in the HTML i have
<div id="therapist-stats" class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
When i test it all datatables on all pages have this override, how do i specify only the stats datatables?
Thanks in advance
4 Answer(s)
-
0
Hi @rvanwoezik
Did you write your custom css to primeng.datatable.css or primeng.datatable.less ? It should be primeng.datatable.css. Could you try that ?
As far as I can see, your css is correct.
-
0
Hi @rvanwoezik
Your CSS selector targets two elements. The second of which:
.
primeng-datatable-container .ui-table table tdis targeting all primeng <td>s
Was that intentional? I think that may explain why the rule is affecting more than just the stats datatables.
-
0
Hi @rvanwoezik,
That is your selector. Add
#therapist-stats. -
0
Thanks!
