How to edit the CSS of the k-expander-header?

[Caroline]

Hi there,

How do I access the CSS of the Kendo expander header? I can edit it in dev tools and the changes show up, but when I try to access the k-expander-header in my CSS files, it shows no changes.

Please see the Stackblitz here:

https://stackblitz.com/edit/angular-7tbwhs?file=src%2Fapp%2Fapp.component.ts

Thank you!

[Christian]

Hi Caroline,

You have two options here:

1. Put that style in our global styles.css file
2. Use ::ng-deep

Beware ::ng-deep is deprecated but there is no real alternative to alter encapsulated styles yet. But be sure to nest it under a :host selector, since it would bleed into other components as well (acting like a global style).

kendo-expansionpanel ::ng-deep .k-expander-header {

padding: 0px;

color: red;

}

 

I edited your Stackblitz:

https://stackblitz.com/edit/angular-7tbwhs-s6xb4n?file=src%2Fapp%2Fapp.component.ts

[Caroline]

Thanks so much

[Simeon]

Hi Caroline,

Indeed, targeting the k-expander-header class is the right way to go. 

Please refer to the following knowledge base article that demonstrates how to add custom styles to the Kendo UI for Angular components:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/custom-styles/

Here is an updated example that demonstrates this approach:

https://stackblitz.com/edit/angular-7tbwhs-e74yyo

An alternative way to customize the look and feel of the components to a certain design is to use the ThemeBuilder. The ThemeBuilder allows you to customize the components directly on the web page and at the end export the custom CSS and load it in the desired app. For more details please check the following article:

https://www.telerik.com/kendo-angular-ui/components/styling/theme-builder/

I hope this helps.

Regards,
Simeon
Progress Telerik

[Caroline]

Great, this works. Thank you!