Visual change in decimal in front end

Hi, I have a requirement whereby we get a decimal back as data and in the front-end, I need to show the fractional part of the decimal smaller then the integer part. Does anyone have experience doing this? Splitting it in two separate attributes is not allowed. Substring-ing the parameter of the text widget and using the decimal attribute for both could work but when formatting the decimal to string I lose the decimals that are ending with a 0, thus where 9,90 would have 2 decimals, it now has 1 or 0 in the case of the image.  
2 answers

You could store decimal piece in an additional attribute (integer would be fine) for the UI. When you display the original decimal you format so it does not show the decimal. Next to it on the page you show the decimal attribute with a smaller size and vertically aligned to the top. I cannot think of any way natively from studio or any hacky CSS way to do this with a single decimal attribute.


Hi Irsjaad,


I could get my decimals smaller as follows:


In the modeler I use 2 text widgets as follows:


My formulas are as follows:


I also added the following styling to the second text widget: text-small


EDIT: The ‘round’ function should be replaced with the ‘floor’ function


Hope it helps!