Change the font size dynamically

[Andres Alvarado]

Hi guys! I hoe you're doing great. 

I have a navbar with 2 buttons, I use them to change the size of the components´ font dynamically. Im using useContext on the site to have access to the current font size. Im able to change the font size as expected on native controls on the site. However, I can't change the font size on the grid control. Do you by any chance have an example on how to change the font size for your controls in general, not just the grid component? Thanks in advance.

Andres

[Johnson Soundararajan S]

Hi Andres Alvarado,

We reviewed your query and noticed that you want to dynamically change the font size in the grid. To meet your requirement, we adjusted the CSS styles to target specific class names.

For your reference, we have provided a sample code snippet and relevant knowledge base details."

Code sample :

App.js
 

      <style>

        {`

            .e-grid .e-headercelldiv,

            .e-grid .e-rowcell,

            .e-grid .e-summarycell,

            .e-grid .e-row .e-input-group .e-input.e-field {

                font-size: ${fontSize}px;

            }

        `}

      </style>

 

KB Links : How to change the font size of Grid elements in JavaScript? | Syncfusion

Sample : Otz7c5 (forked) - StackBlitz

Please get back to us, if you need further assistance

Regards,

Johnson Soundararajan S

[Andres Alvarado]

Hi Soundararajan, thanks for the reply. I successfully implemented the suggested code on my part and it works great. Now, how can achieve the same result on your TextBox and TextArea controls? I can't find info about the CSS properties for them. Thanks!

Andrés

[Johnson Soundararajan S]

Hi Andres Alvarado,

Thank you for reaching out to us.

You wish to dynamically change the font size in the TextBox and TextArea controls. We have successfully met your requirement by implementing CSS styles to target specific class names associated with these components.

Please refer to the below sample and documentation for more information.

Documentation link : Style appearance in React Textbox component | Syncfusion

Sample : Otz7c5 (forked) - StackBlitz

Please get back to us, if you need further assistance

Regards,

Johnson Soundararajan S