windowbg and/or post_wrapper height is not adjusting to "poster"?

[Herrie]

After updating our forum to SMF 2.1 and doing a few tweaks it seems to work fairly well.

We run into 2 minor issues of which one I will ask some support for here:

1. It seems that the height of windowbg and/or post_wrapper classes don't get adjusted correctly. I.e. the height of user info in "poster" class is > height of both windowbg and/or post_wrapper and it causes the layout of posts to be messed up (i.e. they start to indent while they shouldn't).

I tried a few things to get windowbg/post_wrapper height to behave, but so far not much luck. Any thoughts?

Example of a topic that isn't working correctly:

hxxp:manchestervacs.co.uk/DysonForum/index.php?topic=3309.msg36826;topicseen#msg36826 [nonactive]

[Antechinus]

Link gives a 421 error.

[Sir Osis of Liver]

Can't get there from here -

Misdirected Request

The client needs a new connection for this request as the requested host name does not match the Server Name Indication (SNI) in use for this connection.

Check with your host support.

[Herrie]

That was a hosting glitch. Upon some reading it seems to be the <ul> user_info inside the <div>'s that's the problem. Not sure how to address it though.

[Herrie]

Seems that when I add "style="display: grid;" to the windowbg div in Display.template.php it behaves. Not sure this is the best solution though, but it works.

[Antechinus]

The problem is due to the .poster div being floated. Since .post_wrapper has no overflow attribute declared it will not wrap floated content. This is very old school stuff that a lot of people still don't know (or maybe have forgotten). The result is that .post_wrapper is collapsing to fit the height of .postarea (which is not floated).

Honestly it's daft that 2.1 is still using a float here, because it just causes problems with things like this and with RTL support. Grid is the way to go in this instace, for sanity with default markup.

I am running this on default markup:

Code Select Expand

.post_wrapper {
display: grid;
grid-template-columns: 175px minmax(0,calc(100% - 32px));
grid-auto-rows: 1fr min-content;
}
@media screen and (max-width: 720px) {
.post_wrapper {
display: block;
}
}
.poster {
grid-column: 1 / 2;
grid-row: 1 / 3;
width: 175px;
padding: 10px 0 15px 15px;
}
.postarea {
grid-column: 2 / 3;
grid-row: 1 / 2;
display: flex;
flex-direction: column;
margin: 0;
padding: 10px 15px 0 10px;
}
.moderatorbar {
grid-column: 2 / 3;
grid-row: 2 / 3;
margin: 0;
padding: 0 15px 10px 10px;
}