I'm developing an app that supports Dynamic Text Size, where users can change the size of the text.

I'm wondering if there are any existing plugins that support this feature? or a way to do that?

Thanks

Hi Khaled,

Don't know of any component that does that. What you would need to do is use an outsystems slider that everytime changes it would run a javascript that would change a css variable like this:

document.documentElement.style.setProperty('--your-variable', 'font-size');

and on your theme you would have something like this body{font-size: var(--your-variable);}. you also will need a webblock to include in all the pages you want this to happen to change the variable to the wanted value. if you dont want to use css variables you can also assign the font-size css directly to the body

Hope this helps.

Regards,

Marcelo

Marcelo Ferreira wrote:

Hi Khaled,

Don't know of any component that does that. What you would need to do is use an outsystems slider that everytime changes it would run a javascript that would change a css variable like this:

document.documentElement.style.setProperty('--your-variable', 'font-size');

and on your theme you would have something like this body{font-size: var(--your-variable);}. you also will need a webblock to include in all the pages you want this to happen to change the variable to the wanted value. if you dont want to use css variables you can also assign the font-size css directly to the body

Hope this helps.

Regards,

Marcelo

Marcelo, this is a great suggestion. I've been looking for something like this as well! However, I do not understand how I can use a variable in a theme. I can't seem to figure that part out. Can you please help clarify that?


Thanks!

HI,

Those are css variables. In Outsystems UI Web if you look into the top of the theme you will see that a couple of css variables were declared. You use those variables or declare your own. This has nothing to do with the variables you use in your actions.

If you aren't familiarize with css variables you can just use this

document.documentElement.style.setProperty('" + <actionvariable> + "', 'font-size');

on the runjavascript action that you can find on HTTPRequestHandler module.

Regards,

Marcelo