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

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

Image_6389_1719309601143

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


3 Replies

SS Shanmugarajan Saravanan Syncfusion Team June 27, 2024 05:58 AM UTC

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

  font-weightbold;

  font-size20px;

}


Image




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

Regards,
Shanmugarajan S.



PV Pham Van Sy June 30, 2024 03:48 PM UTC

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



SS Shanmugarajan Saravanan Syncfusion Team July 1, 2024 05:38 AM UTC

Pham,

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

Regards,
Shanmugarajan S.


Loader.
Up arrow icon