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

    Official - Free 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: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-direction: normal;
        -moz-box-orient: horizontal;
        flex-direction: row;
        -webkit-flex-direction: row;
    }
    .l-desktop .b-post__body {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -moz-box-direction: normal;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        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__content {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-flex: 2;
        -moz-box-flex: 2;
        -webkit-flex-grow: 2;
        flex-grow: 2;
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -moz-box-direction: normal;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        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 {
        -webkit-box-flex: 2;
        -moz-box-flex: 2;
        -webkit-flex-grow: 2;
        flex-grow: 2;
    }
    .l-desktop .b-sharing-menu {
        margin-bottom: 39px;
    }
    .l-desktop .b-post__content.b-post__content--edit {
        display: none;
    }
    
    /*
    NOTE: 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 anyway.
    */
    @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 - END */
    Note: Take note of the comments in the code in red.

    Browsers Supported: Chrome (and other Webkit-based browsers), Firefox, and Edge. IE is not supported. Please see the long red note 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!

    Need help or not comfortable installing this mod? Purchase the installation service below:

    Product Installation Add-On: $20
    Purchase this product add-on to get professional installation of this mod from us.

    Buy Now Add to Cart View Cart
    Last edited by glennrocksvb; 03-17-2019, 08:38 PM. Reason: Updated code to fix the edit post issue

    #2
    Coffee on me!
    If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

    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.

          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.
              If by chance some day you're not feeling well and you should remember some silly thing I've said or done and it brings back a smile to your face or a chuckle to your heart, then my purpose as your clown has been fulfilled ~ Red Skelton

              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.

                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

                    Working...
                    X