Syamsu Rijal Efendi
Rank: #3383
7Views
1Comments
Force font size to lower (override limit system font-size) in Mobile Application
Question
Mobile

Hi and hello everyone, I hope you are always happy wherever you are :) 

I'm making a program application that displays a business card, but in displaying the card display, if the name and e-mail are too long, the layout of the card becomes messy downward

Next I tried to reduce the font-size, both from the direct outsystems setting and also using css

However, the font displayed on the business card can't be small anymore, assuming my font-size on mobile has a minimum limit of around 8px, and my goal is to shrink it to be smaller than 8px, maybe 3px 4px and 5px.

I have tried and read the ways in the forum one of the ways I override the font using this forge

https://www.outsystems.com/forums/discussion/56947/how-to-prevent-system-font-size-changing-effects-to-android-application/
https://www.outsystems.com/forge/component-overview/4791/lock-font-size


But it didn't work, the font that was displayed was still large


Is there a way to reduce the font size even smaller? or indeed we can't reduce the font smaller than 8px?


Thank you very much

0
0
on 29th Jan
Copy link to comment
João Marques
Rank: #56

Hi Syamsu,


If you reduce your font-size too much then it becomes unreadable and provides a bad experience to the user.

May I propose a different approach? Perhaps a Show more / Show less pattern?

It is very easy to implement and it provides a good variation of showing little text and only show more on demand by the user.

In order to implement it, you just need a local variable to control if it is in compact or expanded view and show the first X characters of the text using Substr function or the full text.

Alternatively, you can use Tooltip from OutSystems UI, to allow the user to see the full text on a balloon on click:


Regards,
João

0
0
on 29th Jan
Copy link to comment