[Support request] content under scroll bar

[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

[David]

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/

[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

[David]

See here:

[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?

[David]

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>

[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

[Ying]

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.

[Author]

Posts