Announcement

Collapse
No announcement yet.

Remove unnecessary whitespace in Posts in Thread View

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Free Mod Remove unnecessary whitespace in Posts in Thread View

    In vBulletin 5 topic page in thread view, there is an excessive and unnecessary whitespace in posts. Please see screenshot for reference:

    Click image for larger version  Name:	image.png Views:	1 Size:	43.9 KB ID:	17412

    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:

    Click image for larger version  Name:	image.png Views:	1 Size:	41.4 KB ID:	17414


    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 */
    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.
    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!
    Last edited by glennrocksvb; 07-06-2022, 03:55 PM. Reason: Updated CSS code again
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Coffee on me!

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      Thanks for the coffee. And also thanks for reporting the db collation issue that was caused by special characters in the code. This would happen only to database that is not using utf8. I removed the offending code so it wouldn't happen anymore. But you would have similar issue if someone posted emojis or accented characters in your forum.
      Last edited by glennrocksvb; 03-16-2019, 10:02 AM.

    • NumNum
      NumNum commented
      Editing a comment
      Eventually I will need to convert it over.

    #3
    This works very well, I've added it to both my cloud demo and self-hosted demo sites:
    https:www.adminammo.com (cloud)
    https://www.talknewsuk.com (self-hosted)

    (Note - I'm not trying to gain traffic. They aren't 'real' sites, they're just vB5 demo sites, the self-hosted one is hosted on my server).

    Out of interest this has been a long term problem. vB3 used to do it right, because the postbit was built with tables so it was quite easy.
    It first went 'wrong' in vB4 because it didn't use tables for the postbit. I recall extensively rebuilding the postbit on my 'real' site, which has run vB4 since 2010, to get rid of the problem, but I can't tell you what I did now. Almost certainly I shoved a table in there!

    It's always been difficult to explain the problem to people....making the sig float upwards never really solved it, though it was a bit better. What was needed was the right hand part of the postbit to be no higher than the left hand side naturally took up, but with the sig at the bottom of that just above the post controls. Sounds simple but so many discussion platforms struggle to get this right.

    Comment


      #4
      Try my coffee

      Comment


        #5
        Glenn
        I noticed with this code when doing an edit of a post, a new box opens below. Originally when editing, only the original text box was showing.
        Is this by design??? If so what is the advantage?

        This only happens when editing posts and not comments fyi

        Comment


        • NumNum
          NumNum commented
          Editing a comment
          I can't replicate this. I looked at two sites, one with the code, one without and see the same behavior on both. With the edit box open, there is text box below also.

          Do you have screen shots?

        #6
        Interesting
        it happens on chrome, Ie and iOS

        I’ll take a screen shot later

        Comment


          #7
          I'll take a look later when I get home.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #8
            Here is a screen shot of the original post and the new box that opens below it when doing an edit.

            Comment


            • NumNum
              NumNum commented
              Editing a comment
              That is odd. FWIW I use firefox.

            • Mitch
              Mitch commented
              Editing a comment
              This was on my iPad. It also happens on my windows pc using chrome or IE

            #9
            I can confirm this actually.

            Comment


              #10
              Strangely enough,after clearing my browser cache I too can replicate it now.

              I kinda like it though.

              Comment


                #11
                Add this code to fix the edit issue:
                Code:
                .l-desktop .b-post__content.b-post__content--edit {
                    display: none;
                }
                I'll add it to the first post shortly.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                • glennrocksvb
                  glennrocksvb commented
                  Editing a comment
                  Done.

                #12
                I was the OP on the other forum, and appreciate the fast solution to the issue I raised. Given I waited 5 years for VB5 to become stable to installation, I was surprised it was not fixed before. I purchased the VB5 license many years ago, but never felt the benefits to move from VB4 was strong enough.
                Awesome work Glenn, I will switch to your solution later this week from the one suggested on the other site and see the difference.

                Comment


                  #13
                  The latest code worked good. Showing doubles on an edit could be confusing, especially for my more senior members which is 99.99%.

                  Having the "white space" was not really an issue for me, and it did help separate things. Actually I never noticed until it was brought up over on the VB by ukcobra. I'll play with it both ways and see what I feel is better for our site.

                  Thanks to all.

                  Comment


                    #14
                    Great work, seems to be working well thus far with VB 5.5.1. Thanks !

                    Comment


                      #15
                      First want to Thank Glenn and all the others that contribute to this forum ! It has really help Admins new to vB5 make sense of all the changes.

                      I tried the above fix, but did not see any changes to the whitespace in posts like in the attached example from Glenn

                      When the css code change is applied, will it effect all previously posted replies or only new posted replies ?

                      Even in this thread, when I Iook at post #4, 6...13, 14. I still see a lot of whitespace between last line of text and first bottom border.

                      I'm running Firefox Quantum v66.1 and am using the Gradient vB style.

                      I did run into issue with accessing css.additional.css as discussed in vB forum thread I can't open css-additional.css. double click doesn't work...

                      As I responded in that thread I was able to add the css code via the Edit Site > Style > CSS Editor method.

                      I reduced the padding link you noted in red from 23 down to 5 and still did not see any changes.

                      Not sure if something has changed in the Firefox browsers or what, but figured this was the best place to ask.

                      Again, Thank You all for your help !

                      Comment

                      Users Viewing This Page

                      Collapse

                      There is 1 user viewing this forum topic.

                      • Guest Guest

                      Latest Posts

                      Collapse

                      Working...
                      X
                      Searching...Please wait.
                      An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                      Please push the back button and reload the previous window.'
                      An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                      Please push the back button and reload the previous window.'
                      An internal error has occurred and the module cannot be displayed.
                      There are no results that meet this criteria.
                      Search Result for "|||"