Settings for Scroll Child layout

[clari]

Hi
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:

How do I turn a collection block into a scrolling container?

This guide will go over how to turn your collection grids into scrollable containers like this [scrolling-container] Select the product container layer in the collection block and navigate to the data tab. [Screen Shot 2020-10-16 at 2.52.00 PM] Remove the “Style.flexWrap” binding in the element data bindings section. This will stop the products from wrapping below each other when their width exceeds the parent elements and will cause the box to scroll. [Screen Shot 2020-10-16 at 3.11.3…

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

[maddy]

Hi @clari 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.

2. 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!

[tdmorgan]

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

[maddy]

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!

[lulimag]

@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:

[maddy]

Hi @lulimag!

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

[lulimag]

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

[maddy]

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.

[lulimag]

Just sent it @maddy !!

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

[lulimag]

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

[maddy]

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