In vBulletin 5 topic page in thread view, there is an excessive and unnecessary whitespace in posts. Please see screenshot for reference:
With the way the HTML is structured in posts, the postbit height is pushing the post body down causing unnecessary whitespace.
To fix this, I've spent a lot of time figuring out a perfect solution that will work on different scenarios (with/without Share buttons, with/without signature, longer postbit, longer post body, more profile fields in postbit, etc.).
I've attempted a fix for this not so long ago but it wasn't perfect and failed in some scenarios. Then I abandoned it. Then when someone posted this issue again on vb.com today, I attempted to fix it again. After tinkering with the code, I think I finally figured out a perfect solution (I hope so).
Here's the screenshot with the CSS fix applied:
Here's the CSS code that you need to add in css_additional in Style Manager in AdminCP or in Sitebuilder CSS Editor.
7/6/2022 Update: IE has reached end of life and thus the code for IE below is no longer necessary.
NOTE for IE: The above code ^^^ does not FULLY work on IE (even if it supports Flexbox Layout) and breaks the layout of some posts in some cases. If you care about IE and wants to fix the broken layout, then include the below code, otherwise, exclude it. The code below will reset the layout back to the original which means the unnecessary whitespace in posts will still appear on IE. No one or very few users are using IE or vB5.6.x no longer support IE anyway.
Note: The code above is based off the vB default style. You might need to tweak some values to suit your needs.
Browsers Supported: Chrome (and other Webkit-based browsers - Safari, Edge, Brave, etc.), Firefox. IE is not supported. Please see the IE notes in the code above.
Demo:
This code is applied on this site. Take a look at the posts with different aforementioned scenarios on this site to see if the unnecessary whitespace is removed.
This is a free mod. Please consider donating. Thank you!
With the way the HTML is structured in posts, the postbit height is pushing the post body down causing unnecessary whitespace.
To fix this, I've spent a lot of time figuring out a perfect solution that will work on different scenarios (with/without Share buttons, with/without signature, longer postbit, longer post body, more profile fields in postbit, etc.).
I've attempted a fix for this not so long ago but it wasn't perfect and failed in some scenarios. Then I abandoned it. Then when someone posted this issue again on vb.com today, I attempted to fix it again. After tinkering with the code, I think I finally figured out a perfect solution (I hope so).
Here's the screenshot with the CSS fix applied:
Here's the CSS code that you need to add in css_additional in Style Manager in AdminCP or in Sitebuilder CSS Editor.
Code:
/* Remove Unnecessary Whitespace in Thread View - START */ .l-desktop .l-row { display: flex; flex-direction: row; } .l-desktop .b-post__body { display: flex; flex-direction: column; height: calc(100% - 23px); /* 23px = default 15px padding-top + 8px padding-bottom of .b-post__body (change if padding was modified) */ } .l-desktop .b-post:not(.b-post--deleted) .b-post__content { display: flex; flex-grow: 2; flex-direction: column; } .l-desktop .conversation-list.thread-view .l-col__flex-3, .l-desktop .conversation-list.thread-view .l-row__fixed--left>.l-col__flex-3 { margin-left: 0; width: calc(100% - 160px); /* 160px = default width of postbit (adjust if width was modified) */ } .l-desktop .OLD__post-content { flex-grow: 2; } .l-desktop .b-sharing-menu { margin-bottom: 39px; } .l-desktop .b-post:not(.b-post--deleted) .b-post__content.b-post__content--edit { display: none; } .l-desktop .b-post__content > .b-post__hide-when-deleted { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .l-desktop .b-post--first .b-media { padding-bottom: 3px; } /* Remove Unnecessary Whitespace in Thread View - END */
NOTE for IE: The above code ^^^ does not FULLY work on IE (even if it supports Flexbox Layout) and breaks the layout of some posts in some cases. If you care about IE and wants to fix the broken layout, then include the below code, otherwise, exclude it. The code below will reset the layout back to the original which means the unnecessary whitespace in posts will still appear on IE. No one or very few users are using IE or vB5.6.x no longer support IE anyway.
Code:
/* Remove Unnecessary Whitespace in Thread View for IE - START */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .l-desktop .l-row, .l-desktop .b-post__content { display: block; } .l-desktop .b-post__body { display: block; height: auto; } .l-desktop .conversation-list.thread-view .l-col__flex-3, .l-desktop .conversation-list.thread-view .l-row__fixed--left>.l-col__flex-3 { margin-left: 160px; /* 160px = default width of postbit (adjust if width was modified) */ width: auto; } .l-desktop .b-sharing-menu { margin-bottom: 0; } } /* Remove Unnecessary Whitespace in Thread View for IE - END */
Note: The code above is based off the vB default style. You might need to tweak some values to suit your needs.
Browsers Supported: Chrome (and other Webkit-based browsers - Safari, Edge, Brave, etc.), Firefox. IE is not supported. Please see the IE notes in the code above.
Demo:
This code is applied on this site. Take a look at the posts with different aforementioned scenarios on this site to see if the unnecessary whitespace is removed.
This is a free mod. Please consider donating. Thank you!
Comment