# Auto-size a Label on the basis of a number (content)

Hi all,

I want to auto-size (increase or decrese) the label size on the basis of a number. If the number (count) increase then the cirkel has to encrease with the number and vice versa. See image

• max count is 2000 = 100% size of the label
• min count is 0 = 1% size of the label

I think I have to do this with CSS, but I don't know how.

Can someone help me with this?

Thanks,

Sonja

Sonja van den Heuvel wrote:

Hi all,

I want to auto-size (increase or decrese) the label size on the basis of a number. If the number (count) increase then the cirkel has to encrease with the number and vice versa. See image

• max count is 2000 = 100% size of the label
• min count is 0 = 1% size of the label

I think I have to do this with CSS, but I don't know how.

Can someone help me with this?

Thanks,

Sonja

Hi,

-You can define CSS classes for each respective size & apply them in CSS using Expression.

You can use If Clause or  provided decision statement for the same under expression.

or

-You can also set the size property of defined class using JS.

Thanks

assif_tiger wrote:

Sonja van den Heuvel wrote:

Hi all,

I want to auto-size (increase or decrese) the label size on the basis of a number. If the number (count) increase then the cirkel has to encrease with the number and vice versa. See image

• max count is 2000 = 100% size of the label
• min count is 0 = 1% size of the label

I think I have to do this with CSS, but I don't know how.

Can someone help me with this?

Thanks,

Sonja

Hi,

-You can define CSS classes for each respective size & apply them in CSS using Expression.

You can use If Clause or  provided decision statement for the same under expression.

or

-You can also set the size property of defined class using JS.

Thanks

Can you give me an example for each solution?

To calcute the percentage you can do:

percentage = (othersize*100)/2000 where othersize is your count.

you can use this percentage to adjust your number, saving this value into a variable and controlling the size of the expression "Number".

Best Regards,

Nuno Pereira

Nuno Gonçalo Pereira wrote:

To calcute the percentage you can do:

percentage = (othersize*100)/2000 where othersize is your count.

you can use this percentage to adjust your number, saving this value into a variable and controlling the size of the expression "Number".

Best Regards,

Nuno Pereira

Thanks Nuno,

But I think I did not explane myself clear. I only want to encrease or decrease the size of the yellow circles.

Do you have an example for how I can do that?

Sonja van den Heuvel wrote:

Hi all,

I want to auto-size (increase or decrese) the label size on the basis of a number. If the number (count) increase then the cirkel has to encrease with the number and vice versa. See image

• max count is 2000 = 100% size of the label
• min count is 0 = 1% size of the label

I think I have to do this with CSS, but I don't know how.

Can someone help me with this?

Thanks,

Sonja

First of all, have you already made the circles on outsystems ?

With the class "dot", you can use the height and widht with radius.

Best Regards

Yes , sure !

You need to do something like this:

Best Regards,

Nuno Pereira

Solution

Sonja van den Heuvel wrote:

Nuno Gonçalo Pereira wrote:

To calcute the percentage you can do:

percentage = (othersize*100)/2000 where othersize is your count.

you can use this percentage to adjust your number, saving this value into a variable and controlling the size of the expression "Number".

Best Regards,

Nuno Pereira

Thanks Nuno,

But I think I did not explane myself clear. I only want to encrease or decrease the size of the yellow circles.

Do you have an example for how I can do that?

Best Regards,

Nuno Pereira

Solution

Nuno Gonçalo Pereira wrote:

Sonja van den Heuvel wrote:

Nuno Gonçalo Pereira wrote:

To calcute the percentage you can do:

percentage = (othersize*100)/2000 where othersize is your count.

you can use this percentage to adjust your number, saving this value into a variable and controlling the size of the expression "Number".

Best Regards,

Nuno Pereira

Thanks Nuno,

But I think I did not explane myself clear. I only want to encrease or decrease the size of the yellow circles.

Do you have an example for how I can do that?

Best Regards,

Nuno Pereira

Hi Nuno,

Yes is works!  thanks for your help

Kind regards,

Sonja