Avatar image distorted

[Jose Rivas]

Avatar image distorted in moodle/mod/assign/view.php?id=xxxxx&action=grading&lang=en

column submission comments, open comments

[Info 3bits]

Could you attach some full page screenshot?

it will help to find the issue.

[Yan Koslovsky]

Hi, the width atribute of this image is set to 20px:

.comment-message .picture { width: 20px; float: left; }

This is causing the distortion, height is inherit from ".userpicture" wich has a value of "25px !important;"

I just tested adding this on custom CSS:

.comment-message .picture { width: inherit; }

this makes image proportional again in 25x25 size

[Info 3bits]

Could you test the issue using Clean instead?

[Info 3bits]

And could you this image as avatar?

Adaptable display the avatar rounded so you should see a circle. If there is some distortion then the circle will be displayed distorted.

For the moment can't replicate it and looks totally round.

[Yan Koslovsky]

Hi, distortion only occurs on block comments (Adaptable), tested with Clean too, there this image is set to 16x16 px (perfectly round)

I believe the cause is an "!important" height attribute set from ".userpicture", this overwrites size attributes in ".comment-message .picture"

Test: (Adaptable 13.1.1 - Moodle 3.2+ - browsers Firefox & Chrome)

[Info 3bits]

It is a bad coding issue in the block. It uses inline styles and also a css class from BS.

We'll try to fix it.

[Info 3bits]

Modify #profilepic img, .userpicture to fix the width/height in blocks.

[Info 3bits]

It is a wrong coding in a third party block. Using the default CSS the image is also distorted.