How to change font size for the header of the Ribbon Group

[Pham Van Sy]

Hi Team!
I have created a style for Ribbon control when using angular
I can change the font style, font weight but I cannot change the font size for the Header of the Ribbon group
As you can see on the below image, the font style is 'italic' and the font weight is 'bold', the font size is not change to 20px

Please help me to set the font size for it
Thanks!

[Shanmugarajan Saravanan]

Hi Pham,

Greetings from Syncfusion support.

Based on your screenshot you have customized the group header using “e-ribbon-group-container” class which will not affects the group header styles. To customize the group header of the Ribbon component, you can use the “e-ribbon-group-header” class along with your custom CSS class. This allows you to change the font size, along with other font properties. We have attached the sample for reference.

Sample - Link

App.Component.html

<ejs-ribbon cssClass="custom-ribbon">
...

</ejs-ribbon>

App.Component.CSS

.custom-ribbon .e-ribbon-group,

.custom-ribbon .e-ribbon-group-header {

  font-style: italic;

  font-weight: bold;

  font-size: 20px;

}

Image




Please check the sample and let us know if you are still facing any issues.

Regards,
Shanmugarajan S.

[Pham Van Sy]

Thank you so much for your answer
It's working fine for me

[Shanmugarajan Saravanan]

Pham,

Thanks for the update. Please get back to us if you need any further assistance.

Regards,
Shanmugarajan S.