Avatars overlap in friends block

Bug #1548522 reported by Aaron Wells on 2016-02-22
8
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
Medium
Pat
15.10
Medium
Unassigned
16.04
Medium
Unassigned
16.10
Medium
Pat

Bug Description

Reported by Patric Lougheed on the forum: https://mahara.org/interaction/forum/topic.php?id=7524&offset=0&limit=10#post30271

In 15.10.1 all avatars that are portrait shaped are overlapping with the names of the avatar above and below them. I checked in all the themes and this occurs. This does not happen when you are in edit mode though.

It would be great to have the option that the avatar is forced to be square like in Moodle.

Cheers,

Patric

UPDATE: It seems each div goes from "position: absolute" in edit mode to "position: relative" in view mode. This problem is also happening in the image gallery block. All the thumbnails are overlapping on each other.

tags: added: bootstrap
Liam (liam-sharpe) wrote :

I wasn't able to replicate the bug. See attachment for what I could see. Can you please regenerate the CSS and have another look? Does your instance have any customizations?

Nothing custom and displays correctly in Firefox but the overlap occurs in Chrome.

I think I am narrowing this down and it is strange. While testing I noticed that sometimes the block displays correctly in Chrome and then not. I have found that if I go back to the profile page from another page it looks correct but if I refresh the page it overlaps. I see a new error in the console:

"Failed to get text for stylesheet 11748.147: No style sheet with given id found"

This only appears when the avatars overlap. Not sure where this is coming from.

I am still having this issue even after an upgrade to 16.04 with fresh files. I have narrowed it down to what I think it could be. There seems to be a an issue with the Masonary JS and initial image loading:

http://stackoverflow.com/questions/14089419/on-refreshing-page-masonry-work-ok-but-first-time-overlaps

By the way, I upgraded the Masonary JS to v4 and the problem persists.

no longer affects: mahara/16.04

Patric, which operating system do you use?

I added some friends to my block and even without a picture, the avatars are overlapping and don't show the name of the person unless the are in the last row or no further avatar is below them. This was on Ubuntu 14.04 and Firefox 46.

That screenshot above was when I viewed my own profile page. When I viewed my profile page as a different user once, I saw the block correctly, but couldn't replicate this a second time and it was back to showing only the last row of friends with their names.

There is also an overlap in the pagination, which is dealt with in bug #1581183.

I have confirmed this problem on Windows 7 and 10 in the latest versions of Firefox and Chrome. Just tried it in IE11 and the layout of the avatars was much worst. Not just overlapping but rows were broken. Doing a page refresh got rid of some of the broken rows but overlapping was still an issue.

Patric, can you please give the patch https://reviews.mahara.org/#/c/6472/ a go and see if it resolves the problem for you with the overlapping avatars?

Hi Kristina,

Already did and looking good so far. Avatars now position themselves where space allows. Tested in Chrome and Firefox. Extreme layout issues in IE have gone as well.

Great to hear, Patric. :-)

Reviewed: https://reviews.mahara.org/6472
Committed: https://git.mahara.org/mahara/mahara/commit/f5f1b03b89965a7bbdfc49a9966d3c77b09712b3
Submitter: Son Nguyen (<email address hidden>)
Branch: master

commit f5f1b03b89965a7bbdfc49a9966d3c77b09712b3
Author: Pat Kira <email address hidden>
Date: Fri May 13 10:27:10 2016 +1200

Bug 1548522 - Fixed friend thumbnails overlap on load

behatnotneeded

Change-Id: I11f32c1186bf45d95b3b5ac33d4d0e3d87ba0fa6

Mahara Bot (dev-mahara) wrote :

Patch for "15.10_STABLE" branch: https://reviews.mahara.org/6484

Reviewed: https://reviews.mahara.org/6483
Committed: https://git.mahara.org/mahara/mahara/commit/0d8e97101eebe4a17c224ada11cb02349030eab8
Submitter: Son Nguyen (<email address hidden>)
Branch: 16.04_STABLE

commit 0d8e97101eebe4a17c224ada11cb02349030eab8
Author: Pat Kira <email address hidden>
Date: Fri May 13 10:27:10 2016 +1200

Bug 1548522 - Fixed friend thumbnails overlap on load

behatnotneeded

Change-Id: I11f32c1186bf45d95b3b5ac33d4d0e3d87ba0fa6
(cherry picked from commit f5f1b03b89965a7bbdfc49a9966d3c77b09712b3)

Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/6484
Committed: https://git.mahara.org/mahara/mahara/commit/11d1b081cf16ca01e2c09a8dbd7534d8aafa648a
Submitter: Son Nguyen (<email address hidden>)
Branch: 15.10_STABLE

commit 11d1b081cf16ca01e2c09a8dbd7534d8aafa648a
Author: Pat Kira <email address hidden>
Date: Fri May 13 10:27:10 2016 +1200

Bug 1548522 - Fixed friend thumbnails overlap on load

behatnotneeded

Change-Id: I11f32c1186bf45d95b3b5ac33d4d0e3d87ba0fa6
(cherry picked from commit f5f1b03b89965a7bbdfc49a9966d3c77b09712b3)

Robert Lyon (robertl-9) on 2016-10-21
Changed in mahara:
milestone: 16.10.0 → none
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers