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
  • Block Domain

    Solved Let's Build It
    26
    1 Votes
    26 Posts
    2k Views

    Yes ogproxy too is functionnal on dev

  • SEO and Nodebb

    Performance
    2
    2 Votes
    2 Posts
    328 Views

    @Panda It’s the best it’s ever been to be honest. I’ve used a myriad of systems in the past - most notably, WordPress, and then Flarum (which for SEO, was absolutely dire - they never even had SEO out of the box, and relied on a third party extension to do it), and NodeBB easily fares the best - see below example

    https://www.google.com/search?q=site%3Asudonix.org&oq=site%3Asudonix.org&aqs=chrome..69i57j69i60j69i58j69i60l2.9039j0j3&sourceid=chrome&ie=UTF-8#ip=1

    However, this was not without significant effort on my part once I’d migrated from COM to ORG - see below posts

    https://community.nodebb.org/topic/17286/google-crawl-error-after-site-migration/17?_=1688461250365

    And also

    https://support.google.com/webmasters/thread/221027803?hl=en&msgid=221464164

    It was painful to say the least - as it turns out, there was an issue in NodeBB core that prevented spiders from getting to content, which as far as I understand, is now fixed. SEO in itself is a dark art - a black box that nobody really fully understands, and it’s essentially going to boil down to one thing - “content”.

    Google’s algorithm for indexing has also changed dramatically over the years. They only now crawl content that has value, so if it believes that your site has nothing to offer, it will simply skip it.

  • Composer options on nodebb

    Solved Configure
    8
    3 Votes
    8 Posts
    430 Views

    @Panda You should be able to expose the CSS for these using F12 to get into console

    3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png

    a2b8ed46-4157-4ff2-85f0-576543380107-image.png

    That should then expose the element once selected

    89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png

    Here’s the below CSS you need based on the screenshot provided.

    .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] { display: none; }
  • Custom badges

    Solved Customisation
    103
    49 Votes
    103 Posts
    11k Views

    Perfect 😉

  • How to fix size of photos & videos NodeBB

    Solved Customisation
    7
    3 Votes
    7 Posts
    662 Views

    @crazycells pleasure. Using percentages makes much more sense in this case. It’s the same argument with px vs pt vs em with fonts, margins, padding, etc., in the sense that em is generally preferred over px and pt

    https://stackoverflow.com/questions/609517/why-em-instead-of-px

  • Post Style View

    Solved Customisation
    67
    18 Votes
    67 Posts
    6k Views

    @cagatay

    Just add margin-left on the element like @phenomlab said to you :

    topic [component="post/parent"] { margin-left: 10px; }

    aa08c62b-4223-4cba-8c0f-c73d50474c0d-image.png

    Maybe @phenomlab have a better way

  • [NodeBB] First post customization

    Solved Customisation
    5
    4 Votes
    5 Posts
    724 Views

    @phenomlab thanks 🙏

  • NodeBB - Created pages not found?

    General
    20
    3 Votes
    20 Posts
    1k Views

    @jac Exactly. Hard point to argue.