Help me achieve this effect (scrollable screen)

Questions about Thunkable
1

Hi all,

I’m looking to create the below scrollable effect on a screen but I’m struggling to get this right.

Scrollable Screen
Scrollable Screen1013×583 56.7 KB

Essentially, the screen is made up of three stacked columns, the middle column contains many stacked rows, each with texts and images.

I would like the user to be able to scroll the page, until they reach the bottom where they can click the back button.

Issues I’m encountering:

  1. Scaling the rows - Do I set the entire middle column to >100% of the screen height to ensure it overspills or to contain content?
  2. Row height - If I want the rows to each be 10% of the total phone screen height (not the middle column height), how would I achieve this?
  3. Scrollable mode - Do I set the entire screen to scrollable or do something else?

This feels like it should be fairly simple but I have tried various combinations of the above and haven’t found the right answer yet. Thanks in advance for your help.

2

Screens don’t automatically activate the scrolling feature. You would have to activate it like this:

Design > Screen Component > Scrollable toggle switch (right panel)

Now the scrolling should work as long as the components you put aren’t able to fit inside the screen.

If you would want to make only a section scrollable, use the layout component and put the desired buttons, labels, etc into your Layout component. Then change it to “scrollable.”