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

    #16
    It's expected that necessary whitespace will still be there. The keyword is "necessary". Remember that the section on the left with the avatar should always have the same height as the post content body on the right. Whichever of the 2 is taller will stretch the other to make them the same height. The thing to observe when the post body content is shorter and stretched, the signature and post footer controls should always be at the bottom which may create a necessary whitespace from the post text. On the other hand, if the avatar section on the left is shorter and stretched, the online/offline icon should always be at the bottom which may create a necessary whitespace from the profile fields.

    Having said that, do you still see the issue? Can you post a screenshot?
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #17
      Regarding the issue on editing css_additional, are you on vBCloud? If not, did you set the permission I mentioned in the thread you linked?
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #18
        Originally posted by glennrocksvb View Post
        Remember that the section on the left with the avatar should always have the same height as the post content body on the right. Whichever of the 2 is taller will stretch the other to make them the same height.
        Glenn,
        your above statement helped me understand what was going on. The post content is just matching up with the left Avatar field. In that case, what I see is normal for single line replies. Thank You for clarifying.


        Click image for larger version

Name:	3-25-2019 11-55-08 AM.jpg
Views:	533
Size:	37.4 KB
ID:	17746


        Originally posted by glennrocksvb View Post
        Regarding the issue on editing css_additional, are you on vBCloud? If not, did you set the permission I mentioned in the thread you linked?
        It is strange, I'm setup as a Super Admin and I did check all the Administrator permissions and the option to edit templates was already enabled. I toggled the option off, saved and then back on again and saved, but still could not open up css.additional.css via Admincp unless I had edited it first via the Edit Site path.

        Comment


          #19
          Open the Javascript console (F12 > Console tab). Then try editing template again in AdminCP. I suspect there's a Javascript error that prevents you to edit a template.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #20
            I watched the Java console and every click came back as AJAX compatible. However, I have edited the CSS once via the Edit Site. So, now when I go in through Admincp, it allows me to double click on css.additional.css and open and edit like it should. But I know, if there is no code in css.additional, it will fail in admincp. If I remove code and try something else, I will remember watch the Java console and capture/share what I see.

            Comment


              #21
              All,

              I found an issue for soft-deleted posts where the post content was shown instead of hidden by default. I have fixed this issue and updated the CSS code in the first post.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


              • NumNum
                NumNum commented
                Editing a comment
                This must be a specific version issue? I don't see the issue on 5.0.0 nor 5.2.2

              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                I'm not sure but those are very old vB5 versions. I saw the issue here which is currently on 5.5.1 but I'm not sure if this due to my customization.

              • NumNum
                NumNum commented
                Editing a comment
                I'm sorry, I meant 5.5.0 and 5.5.2

              • glennrocksvb
                glennrocksvb commented
                Editing a comment
                I'll upgrade my test environment and check.

              #22
              I just implemented this on my site running 5.5.3 and it worked great, but I was wondering if there is a way to add just a little of the white space back? The space between the signature and the posts is a little too close in some instances and it's hard to tell where the post ends and the signature begins. I would love if I could make it just 1 space bigger between the post and the signature.

              Comment


                #23
                THPGolf, try adding this custom CSS:

                Code:
                .l-desktop .b-post__content .post-signature {
                    margin-top: 20px;
                }
                Adjust value to your liking.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #24
                  It seems since the new 5.5.6 update that on some users, the signature white space is huge underneath it. I removed the above CSS code and it goes back to normal, but of course the whitespace returns in the post area. Until we get some more info of why i'll leave the css off for now. Would rather have the white space in the post than under the signature.
                  Please Help!!

                  With CSS

                  Click image for larger version  Name:	1CF32896-C5A6-4D6C-A8FC-325986CED618.jpeg Views:	0 Size:	137.2 KB ID:	21221

                  Without

                  Click image for larger version  Name:	9C8EC8F7-86F7-430A-97AE-940C6C28C694.jpeg Views:	0 Size:	112.4 KB ID:	21220



                  INSTALLED CSS CODE!!!


                  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:not(.b-post--deleted) .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% - 224px); /* 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:not(.b-post--deleted) .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: 224px; /* 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 */

                  Comment


                  • NumNum
                    NumNum commented
                    Editing a comment
                    I notice this also, but seems to begin after the OP. All subsequent responses are affected.

                  • Mitch
                    Mitch commented
                    Editing a comment
                    Thanks for confirming.

                  #25
                  I can confirm this.

                  In short posts, signatures now 'float' up to the bottom of the post text, leaving any unavoidable space underneath, whereas previously they would sit at the bottom, with the unavoidable space above.

                  This is not just in replies, it is in all posts where there would be *necessary* whitespace in the post itself.

                  To me a signature always needs to be at the bottom.

                  glennrocksvb for his attention.

                  Comment


                    #26
                    What we should see:

                    Click image for larger version  Name:	sig1.PNG Views:	0 Size:	25.7 KB ID:	21365

                    What we actually see since 5.5.6:

                    Click image for larger version  Name:	sig2.PNG Views:	0 Size:	25.8 KB ID:	21368

                    Comment


                      #27
                      Add this code here into your css_additional.css template in Style Manager in AdminCP or in Sitebuilder CSS Editor:
                      Code:
                      .l-desktop .b-post__body {
                          display: flex;
                          flex-direction: column;
                          height: calc(100% - 23px);
                      }

                      Comment


                      • Mitch
                        Mitch commented
                        Editing a comment
                        I added that code and nothing changed.

                      #28
                      Well Mitch, it can't work unless you remove the old code first of course

                      Comment


                        #29
                        Well thanks, yes it works after removing the old code. We’re not all rocket scientists here . Now how do I get rid of those stripes under each posting?TIA

                        Comment


                          #30
                          The above solution was tested on 5.5.6 and 5.6.0 RC2, and it works without adding anything else.

                          Perhaps some other code in your custom style is interfering with that code I have written earlier.

                          Try this, add this to your css_additional.css template or overwrite the existing code I have posted above:
                          Code:
                          .l-desktop .l-row {
                              display: flex;
                              flex-direction: row;
                          }
                          
                          .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% - 224px); /* 160px = default width of postbit (adjust if width was modified) */
                          }
                          
                          .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 .OLD__post-content {
                              flex-grow: 2;
                          }
                          .l-desktop .b-sharing-menu {
                              margin-bottom: 39px;
                          }
                          .h-padding-vert-xl {
                              padding-bottom: 25px; /* 25px = default 15px (change padding to your needs) */
                          }
                          EDIT: Like I have said this also depends on the style itself if it was already modded or not :/

                          Comment


                          • Mitch
                            Mitch commented
                            Editing a comment
                            I put this above code in and removed your previous. Still a no go. It looks pretty much like Glenn's original code did
                            Thanks for the effort anyway

                        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 "|||"