[Support request] content under scroll bar

Home Forums Support [Support request] content under scroll bar

Home Forums Support content under scroll bar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1648746
    Den

    Hi team,

    How do I achieve (content under scrollbar) like this? if there’s something I can do, do let me know.

    Example Image – https://ibb.co/4Nb00fR

    #1648992
    David
    Staff
    Customer Support

    Hi there,

    add a Group Block, and in the sidebar settings > Advanced give it an Additional CSS Class of scroll-box

    Add your content inside the Group Block.

    Then add this CSS:

    .scroll-box > div {
        max-height: 400px; /* Set height of scroll box */
        overflow-y: auto;
        margin-bottom: 40px;
    }

    If you want more styling control then use a Container Block from the GenerateBlocks plugin.

    https://wordpress.org/plugins/generateblocks/

    #1650138
    Den

    Hi david,

    sorry for the inconvenience but can you please tell me how do I add those group blocks and Additional CSS Class of scroll-box as i am a bit non techy.

    Thanks in advance

    Regards,
    Karam

    #1650180
    David
    Staff
    Customer Support
    #1650190
    Den

    WOW…!

    you guys have the best after-sales support (i must say).

    one more thing, can I do this in classic editor? OR is it only possible in Gutenberg?

    #1650245
    David
    Staff
    Customer Support

    That method is only possible in the Gutenberg Editor.
    If you wanted to do that in the Classic Editor, you would need to switch to the code editor view, where you can see the HTML and then add your own HTML like so:

    <div class="scroll-box">
        <div class="scroll-box-inner">
            Your content goes here
        </div>
    </div>
    #1650804
    Den

    Hey David,

    it worked absolutely fine.

    I have made some little tweaks in it (width and bg colour for example). But how do I make this section align: right? and once done, will I able to write something on the left side (blank part)? if yes, then how?

    I have made an image (using photoshop) for a better example. – https://ibb.co/F315nmg

    my site: https://bit.ly/3jwncEu

    #1650861
    Ying
    Staff
    Customer Support

    Hello Karam,

    This CSS can move the section to right.

    .wp-block-group__inner-container {
        margin-left: auto;
        margin-right: 0;
    }

    If you want to add content on its left, make sure the content are in a container.

    Let me know if you need further assistance.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.