Create Horizontal Scroll (Swipe Like) Row

Thanks for your patience.

Here is a very flexible solution. Briefly, I added an additional column “Master Column” which eliminates the extra space issue of the original (and BRILLIANT) solution. Instead of creating multiple “scroll items” as outlined in the original solution, I’ve created just one call ScrollTemplate which will be cloned (see below). I also made the form Scrollable to accomodate multiple rows.

You are still stuck with square list elements. Because of the z Rotation that makes this solution work, changing the size and the shape of the template is tricky. Plan to use squares or spend a lot of time fiddling around with margins, padding, etc.

The start event triggers a loop through a JSON tree (this could easily be moved to a button).

The key is the JSON tree.


The "Parent’ object “APP Shows” is a list. Each item in the list contains an Object (show). Each show represents a ROW to be created in the form. The NAME property is used for the row label (lblContainer). Each SHOW object has a list CHARACTERS. Each character object will be mapped to the cloned Scroll template.

Then the Fill List Block will use the CHARACTER object (regardless of how many there are), to generate a new label, image, or button component within the template.

Here is a GIF from this simple tree. But it could have any number of SHOWs, CHARACTERs, and CHARACTER properties.

Here is a remixable project lnik
https://x.thunkable.com/copy/8282b1f9a313e25493dacdd29a0447ad

1 Like

I also have been doing some testing of my own. I have noticed the scrollbar is way up so I made this:
Scroll Test

It allows you to control where the scrollbar is by adjusting the height(from 200) and I prefer 220 with a top padding of 20.

1 Like

Thanks @drted I’ll try this out this weekend.

Unfortunately this trick is uncontrollable, nothing responds as it should and you can’t really use it in an serious interface.

I’m sad now.

It is not idea, that’s for sure. And the scroll bar at the top is goofy.

I don’t disagree wiith you, but I would like your information on what you mean by

  1. Uncontrollable (no settings? UI misbehavior, etc)
  2. “Nothing” responds as it should. What elements or actions are causing unexpected responses

These might be issues that could be tweaked to get something better. Again, not ideal and not full-featured for sure. And not a substitute for Thunkable adding horizontal scrolling frames

I’m trying to make a scrolling list of buttons that are not square and that only fit in a row high as the buttons are

You are 100% right. Changing the size or the shape is REALLY touchy and does not work well.

The solution pretty much sticks you with squares. Because of the rotation, changing anything is mind bending (at least for me). :frowning:

Here is an improved version using the Custom Data List Viewer. Much faster and fewer blocks!!!

2 Likes

It is not working.

Link of my app: Thunkable

Any update on this being an actual feature in Thunkable without having to hack it?

@usamobileappsllc it’s on the roadmap, as we add more features to groups this will hopefully get added.

Are you able to complete your app with the current method?

Awesome! Yes I think this method will work, just wanted to see if there was an update on an official feature coming soon. Loving Thunkable as always!

It seems like you’ve posted twice with the exact same content. Can you please delete one of your posts?

This solution works great on my iPhone with Thunkable Live. However, it doesn’t work (blocks stay vertical) on publishing a web app. Does anyone have a solution that works in web, too?

2 Likes

It doesn’t work for me. I am unable to swipe all the way right.

If I remember correctly from my attempt at this (abandoned because it didn’t work for the web app), you need to make a ‘blank’ button on left and right sides to pad it.

1 Like

Hello everyone,

I tried this tutorial, inspired by the primary introducer of this topic but, the link that is provided no longer works. Horizontal Scrolling - YouTube

Is there anyone who has a working horizontal scroller that I could study?

Thanks.

The new Beta Row component has that feature, not sure when will be published? @domhnallohanlon

2 Likes

Hi, do you have the link to this project?
It will be awesome to check the config of how you do this !

1 Like

well not the exact project but here -
https://x.thunkable.com/copy/3c73f27320178cb1af853c35198e7541
taken from topic -

1 Like