Positioning of group pictures in forum post listing - want horizontal not vertical

Positioning of group pictures in forum post listing - want horizontal not vertical

by Eoin Campbell -
Number of replies: 6
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

I have Moodle 3.1 with the Essential theme installed, and I am trying to position the group icons that appear in forum postings in a horizontal rather than vertical line. By default, the icons are located on the left of the post, in a vertical line, like the image below:

Left aligned, vertically oriented group icons in grouppictures

I would like the images to be horizontally oriented and right-aligned, as presented in Moodle.org community forums, like in the image below:

Right-aligned horizontally oriented group pictures

I've tried copying the CSS without success, ending up with the mishmash below. Participants may be members of 15 groups or more, so the vertical alignment is unsuited for short posts:



I modified the .grouppictures class in CSS to get this layout, but I am missing something that isn't obvious from inspecting the CSS used on Moodle.org.

I think this issue is not specific to the Essential theme, as group pictures are also left-aligned and vertically oriented in the Moodle 3.2 Clean theme.

Any suggestions gratefully received.


Average of ratings: Useful (1)
In reply to Eoin Campbell

Re: Positioning of group pictures in forum post listing - want horizontal not vertical

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Try this...

.mod-forum .forumpost .row .right .grouppictures a {
    display: inline-block;
    margin-top: 0;
    margin-right: 2px;
    margin-bottom: 5px;
    margin-left: 2px;
    padding-top: 5px;
    padding-right: 6px;
    padding-bottom: 5px;
    padding-left: 6px;
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
}

Average of ratings: -
In reply to Mary Evans

Re: Positioning of group pictures in forum post listing - want horizontal not vertical

by Eoin Campbell -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mary,

Many thanks for responding, this didn't quite work, but I changed the class qualifier to

 .forumpost .row .left .grouppictures a

instead, and it now displays in 2 vertical rows, which is a big improvement, as it halves the vertical length.

Horizontal would be better yet, but this is still good enough.



Average of ratings: -
In reply to Eoin Campbell

Re: Positioning of group pictures in forum post listing - want horizontal not vertical

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

In that case try  

display: inline-block !important;

instead of  display: inline-block;

Average of ratings: -
In reply to Mary Evans

Re: Positioning of group pictures in forum post listing - want horizontal not vertical

by Eoin Campbell -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Hi Mary, 

That did the trick, in conjunction with the following CSS which places the grouppictures div on the top right, and also makes the box narrower, so that the icons are wrapped onto 2 lines.

.forumpost .row .left .grouppictures {
   position: absolute;
   top: -60px;
   right: 14px;
   height: 64px;
   width: 300px;
}

Below is the final result. Many thanks for your help.

Group icons in forum post, in 2 rows on top right corner


P.S. Happy St. Patricks Day!


Average of ratings: -
In reply to Eoin Campbell

Re: Positioning of group pictures in forum post listing - want horizontal not vertical

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi, I realised that in the early hours of this morning. The best way round this would be to add a rendere rthat places those icons directly into the space they need to be with the minimum of fuss and CSS.

I am planning on working on this shortly.

Thanks

Mary

Happy St.Patrick's day to you too!

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Positioning of group pictures in forum post listing - want horizontal not vertical

by Phuong Hoang -

Hi Mary,

Do you finish adding a render that places those icons directly into the space they need to be?

I look forward to hearing from you soon.

Best wishes,

Average of ratings: -