Hi Team,

I am using a Content/UserAvatar in my app. I want to resize it to become larger but only medium size is available in the properties. How can I make it larger?

For reference: https://outsystemsui.outsystems.com/OutSystemsUIWebsite/PatternDetail?PatternId=80

Regards,

Nhorwin

Solution

Nhorwin John Villano wrote:

Hi Team,

I am using a Content/UserAvatar in my app. I want to resize it to become larger but only medium size is available in the properties. How can I make it larger?

For reference: https://outsystemsui.outsystems.com/OutSystemsUIWebsite/PatternDetail?PatternId=80

Regards,

Nhorwin

 Hi Nhorwin,

The Content/Avatar has a built-in style class called "avatar". With this class you can customize the size on the CSS editor but you must clear the "size" field from the widget properties, otherwise it will override the CSS of the stylesheet, because it is more specific or it may cause some conflit.

Here is a picture of how I set it up. 

Notice that I set the CSS class for the screen I am using this UserAvatar, if I used it on the app theme tab it would apply this style to all UserAvatars in my app. See what best fits your purpose :)

 Hope it helped,

Clarisse

Solution

Clarisse Carneiro wrote:

Nhorwin John Villano wrote:

Hi Team,

I am using a Content/UserAvatar in my app. I want to resize it to become larger but only medium size is available in the properties. How can I make it larger?

For reference: https://outsystemsui.outsystems.com/OutSystemsUIWebsite/PatternDetail?PatternId=80

Regards,

Nhorwin

 Hi Nhorwin,

The Content/Avatar has a built-in style class called "avatar". With this class you can customize the size on the CSS editor but you must clear the "size" field from the widget properties, otherwise it will override the CSS of the stylesheet, because it is more specific or it may cause some conflit.

Here is a picture of how I set it up. 

Notice that I set the CSS class for the screen I am using this UserAvatar, if I used it on the app theme tab it would apply this style to all UserAvatars in my app. See what best fits your purpose :)

 Hope it helped,

Clarisse

 Hi Clarisse,

This solution works. Thank you very much.

Regards, 

Nhorwin