Strange hash-tag url layout issue

[jtilson]

I'm developing a plugin and came across a bizarre layout issue. After creating objects, my plugin will redirect back to a long list of other objects. It adds a hash-tag in the URL so that it pops down the list to show the user which item they just created. The plugin list in the admin section does something similar after enabling/disabling a plugin.

Weird thing is, when the page is rendered with a hashtag in the url, the elgg-main elgg-body div seems to lose some of it's padding/margin and the breadcrumbs get cut off.

I've attached a couple screenshots below... To demonstrate, I just hit a plain old blog listing and stuck a hashtag with one of the elgg-object-xx id's on the end.

I can reproduce this in Safari, Firefox, and Chrome (on a Mac, haven't tested IE or any windows browser).. I spent some time troubleshooting and I couldn't figure out what the issue was, but I'm not a CSS guru by any means..

[cash]

Looks like this is going to be challenging to track down

[cash]

I figured out what the issue is. We are using overflow: hidden on .elgg-body. Going to an anchor within an .elgg-body div causes the div to scroll. This then chops off the top of the div.

[ewinslow]

Turns out this is actually caused by the fact that we still have

.elgg-body:after {
  content: "x x x x x x x x";
}

Which is not necessary when using overflow: hidden to create a new formatting context. You can check this by setting .elgg-body {overflow:auto} .elgg-body:after {visibility:visible}. This should not show any scrollbars since we never set height on .elgg-body, but the scrollbars appear in order to make room for all the x's.

We were setting height: 0 !important, but that's not enough, since by default the :after element is overflow: visible. So the x's were actually managing to make the .elgg-body elements scrollable even though .elgg-bodys are supposed to fit to the height of their content. I vote for removing this :after stuff, but if we really want to keep that declaration, we need to use .elgg-body:after { overflow: hidden; } to make sure it doesn't cause this scrolling problem.

[cash]

The after xxxx stuff is to make this a space filling div. Adding overflow: hidden for the after selector works. Thanks!

[Cash Costello]

Fixes #3982 fixing scrolling issue with elgg-body

Changeset: 65afed116e377c5a17bd6faf278ae9b71dd5abdf

[Cash Costello]

Fixes #3982 fixing scrolling issue with elgg-body

Changeset: c02c507362c9b50a6a7896c7c877bf0f127c819a

[ewinslow]

Just FYI: we do not need to add x's to make the div "space-filling" if we're using the overflow:hidden technique on .elgg-body.