Defect #5008

Gravatar breaks layout of "logged in" page

Added by Henrik Ammer over 7 years ago. Updated over 7 years ago.

Status:ClosedStart date:2010-03-08
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:UI
Target version:0.9.4
Resolution:Fixed Affected version:

Description

When you enable gravatar on the website it breaks the "logged in as USERNAME" page since there is no clearing after the h2 tag inside the div id="content".

In the CSS you could add the following code:

#content h2:after{
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

but it will only be supported in the later browsers (and will make the change on all pages, not just the logged in as one). Other places in the code you've added empty divs with the clear:both applied to its style attribute so might be needed here aswell.

Now why you ask yourself? The following divs with the splitcontentleft and splitcontentright classes uses up 49% each of the space and since img.gravatar floats to the left it makes the splitcontentright appear below the splitcontentleft.

I really hope you all understand me cuz I'm down with a flu and my brain ain't working at top speed. I'll see if I find the rhtml file and I might even add a patch for it. :)

clear_both_user_show.diff Magnifier (358 Bytes) Henrik Ammer, 2010-03-09 10:40

gravatar_on_issue.png (23.8 KB) Henrik Ammer, 2010-03-23 12:20


Related issues

Duplicated by Redmine - Defect #4597: Display weirdness in users/show.rhtml in gravatars are en... Closed 2010-01-17

Associated revisions

Revision 3562
Added by Jean-Philippe Lang over 7 years ago

Fixed: avatar display breaks user profile page layout (#5008).

History

#1 Updated by Jean-Philippe Lang over 7 years ago

I'm not sure to know what the "logged in as USERNAME" page is.
Could you attach a screenshot?

#2 Updated by Jean-Philippe Lang over 7 years ago

  • Category set to UI

#3 Updated by Jean-Philippe Lang over 7 years ago

OK, I see (/users/1)

#4 Updated by Henrik Ammer over 7 years ago

I found the appropriate rhtml file (app/views/users/show.rhtml) however there is no div style="clear: both;" after .splitcontentright and I do see one in Firebug so therefor I thought it might be added in some javascript file but found nothing regarding it.

So, I've added a line with the div to user_show.rhtml (diff attached) but not totally sure that it's the way to add it. You be the judge.

#5 Updated by Henrik Ammer over 7 years ago

Jean-Philippe Lang wrote:

OK, I see (/users/1)

Sorry, my bad for not pointing that out. I blame the snot! :)

#6 Updated by Jean-Philippe Lang over 7 years ago

  • Status changed from New to Resolved
  • Target version set to 0.9.4
  • Resolution set to Fixed

The problem with clear:both; is that it will break if you add another higher floating div (eg. in the sidebar).
I fixed it using another approach in r3562.

#7 Updated by Henrik Ammer over 7 years ago

Jean-Philippe Lang wrote:

The problem with clear:both; is that it will break if you add another higher floating div (eg. in the sidebar).
I fixed it using another approach in r3562.

This though makes other places gravatars are shown (like for instance issues) not align properly. Examples are "Assigned to" and the history of the issue as seen on the screenshot attached.

#8 Updated by Jean-Philippe Lang over 7 years ago

  • Status changed from Resolved to Closed

I don't really see what is wrong on your screenshot.
I'm closing this ticket since the initial problem is solved and merged from 0.9.4 release. Open a new ticket if needed.

Also available in: Atom PDF