Skip to content

Adjusting the size of boxes in posts-list class

Solved Customisation
  • Hi @phenomlab ,

    In NodeBB, there are many pages containing a list of posts such as bookmarks, upvoted, etc.

    For example:
    https://sudonix.com/user/crazycells/upvoted

    How can I change the height of the boxes containing the post with CSS? I would like to increase the box size, so a bigger part of the post will show as a preview in those lists…

    All those lists contain “posts-list” class…

  • @crazycells It’s not so much the height of the boxes that causes the issue here, but more the CSS class overflow: hidden;. You could change that to the below

    .posts-list .posts-list-item .content {
        overflow: auto;
    }
    

    This would then give you something like this

    9d3f213c-f4b7-4795-b7de-99689fd07ed4-image.png

    Notice the scrollbar that appears meaning you scan keep the same panel height, but still scroll through the message to be able to read all of it.

    If you wanted the panel height to size with the content, you’d need to do this

    .posts-list .posts-list-item .content {
        max-height: none;
        height: auto;
    }
    

    Which in turn would result in this

    569b9c79-eadc-4eb2-ae3b-d612b401f010-image.png

    I’d personally take the overflow: auto; route as this is easier on the eyes. However, you get a balance of the two by setting a higher value for max-height , so

    .posts-list .posts-list-item .content {
        max-height: 600px;
    }
    

    This would still require overflow: auto;, but by setting max-height you are able to increase the height of the panel to something more aligned with your requirements, and still be able to read the entire message without having to open it.

    c3ad820c-0cc3-4fee-b099-4cc3466959ce-image.png

    The block of HTML being targeted here is below

    1358ca2c-4d07-4314-bf0c-8ccd1b322941-image.png

  • @phenomlab thanks a lot, this combination works best 👍

    .posts-list .posts-list-item .content {
        overflow: auto;
        max-height: 600px;
    }
    
  • crazycellsundefined crazycells has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics