Home App Docs Blog Github

Settings for Scroll Child layout

What settings do I need to change in a box/Child layout set to “Scroll” to actually make the items scroll? At the moment, when I add more elements, they just shrink to fit the screen. What I am trying to do is only show 3 elements on the page and then allow the user to scroll to see the other elements.

i.e. I am trying to replicate what was asked here but using a manually created block in the CMS:

See attached what is happening to my block at the moment:

Hi @clari :wave:t2: Thanks for reaching out!

To turn a box block into a scroll container:

  1. Wrap the box holding the child elements in another box. Now, select the box holding the child elements and change the child layout to scroll.

  1. Select the child elements (images) and give them a width. In this example, each image has a width of 300px. Now, select the box wrapping the box holding the images. Scroll down to the custom CSS properties section in the Styles tab and add overflow: scroll.

Let us know if you have any questions!

Hey @maddy! Thanks so much for this. Is there an easy way to make it auto-scroll slowly and loop?

Hi @tdmorgan!

You can create a scroll box with auto-scroll and a loop in Builder, but this would require adding custom code. Here is an example of an auto scroll box (using custom CSS) that may be helpful!

@maddy Hi! I am having a similar issue that my box is just squeezing all the boxes inside of it to fit on the screen rather than hiding some to allow users to scroll. I don’t see the style flex wrap binding applied to mine though - can you help? This is what I’d like the section to look like:

Hi @lulimag!

Can you share a link to the Builder page this is occurring on?

@maddy for some reason the forum doesn’t allow me to post my link - can I email it?

I will check our forum settings to see why you’re unable to share links! In the meantime, you can email the link to help@builder.io.

Just sent it @maddy !!

Thanks! I went ahead and wrapped the box containing the guides in another box block. I then added the scroll to the new box block and removed it from the inner box block. The content is scrollable now!

Thank you! Is there a way to make it so that the content doesn’t get smaller the more boxes I add in the scroll box? @maddy

Yes, I adjusted the box’s width to “fit-content”. Now if you add a new box, the content won’t shrink.

Oct-08-2021 09-40-23