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!