topic Re: Setting Responsive Font Size using CSS Style in App Development

Setting Responsive Font Size using CSS Style

tommaso26 — Thu, 23 Dec 2021 09:02:27 GMT

Hello everyone,

I am using four different Simple KPI objects to represent some values on the same sheet. I had to unflag the "Responsive Size" option because I want all the fonts to have the same size regardless of the space available.

However, when I use the app in small screens, the KPIs are not completely visible and I have to use the scrollbar in order to see them. I tried to use the CSS Style in order to set the font size as a percentage, here below my code:

& .value *{
font-size: 90%; !important;
}
& .label *{
font-size: 90%; !important;
}

This code doesn't work as expected, it sets all the fonts to the same dimension but they do not change with respect to the available space. I would like to know if there is a way to set all the fonts to the same dimension but also responsive to the available space in the sheet.

Thank you very much,

Tommaso

Re: Setting Responsive Font Size using CSS Style

ALEX1977ALEX — Thu, 24 Mar 2022 13:10:05 GMT

Hello Tommaso

Do you solve this issue ?. i'm facing right now with the same issue

But to my mind like we are on responsive tool , we can't force the size of the font

Thank

Re: Setting Responsive Font Size using CSS Style

tommaso26 — Thu, 24 Mar 2022 13:26:25 GMT

Hello Alex,

I managed to solve the issue using the Viewport dimensions for CSS (https://www.w3schools.com/cssref/css_units.asp)

For example, if you want to set the size of a KPI's value and label, you can use the following code with Viewport dimensions:

& .value *{
font-size: 3.5vmin; !important;
}
& .label *{
font-size: 1.5 vmin; !important;
}

Tommaso

Re: Setting Responsive Font Size using CSS Style

ALEX1977ALEX — Thu, 24 Mar 2022 14:16:22 GMT

Hello Tommaso

Is this the way to do to it?

div[tid="kPpdyjK"] .value *{
font-size: 9.5 vmin; !important;
}
& .label *{
font-size: 6.5 vmin; !important;
}

Re: Setting Responsive Font Size using CSS Style

tommaso26 — Thu, 24 Mar 2022 14:24:12 GMT

Hello Alex,

you can write it in different ways depending on your needs. Look at https://www.w3schools.com/cssref/css_units.asp for more info.

This is an example:

Where "vmin" is relative to 1% of the viewport's smaller dimension.

Regards,

Tommaso

Re: Setting Responsive Font Size using CSS Style

ALEX1977ALEX — Thu, 24 Mar 2022 14:32:34 GMT

ok i'm not using a multi kpi

I only use multi kpi for the css style , but there is no KPI to display

i use a text/image object and i want to modify the size of the text using css style (thank to the multi kpi)

Thank for your differents returns

See u