Horizontal Scroll (Swipe Like) for Rows

[farzam-parto]

Is your feature request related to a problem? Please describe.

Hi everyone!
I looked around the community to find a way or a solution to create horizontal scroll row with multiple columns inside it.
Something like the -->blue part<-- of this Gif example.

Describe the solution you'd like

I would like to able to create scrollable row exactly like the columns. But instead of scrolling vertically, it should scroll horizontally.

Which platform are you asking for?
Thunkable ✕ (x.thunkable.com)

Additional context
I need a solution to solve the problem in thunkable X - cuz I know there is some extentions which is avaliable for the classic version
Here is a link to my thread in community: https://community.thunkable.com/t/create-horizontal-scroll-swipe-like-row/76784

[mark-friedman]

Thanks for the feature request. We have some plans for a feature like this but it's not in the immediate future.

[farzam-parto]

Thanks for the feature request. We have some plans for a feature like this but it's not in the immediate future.

Thank you for your response.
I'll mention that there is a lot of people who look after this function and they are not able to finish their projects at the way they want.

[farzam-parto]

Hi again Guys,

After 2days of trying finally I came up with an idea! (Special Thanks to my GF 😝😁)

1. First of all I created a Row which contains a Column which follow with 5 additional Colums (Which is our Scroll items)

2. We name The first Row as Scroll Row

3. The following Column will be called as Scroll Container

4. And each Colum inside that Container will be called as Scroll Item1, 2, 3, 4...

5. Now we set the Height & Width of our Scroll Row to "Fit Contents"

6. After that we assign the Height & Width of our Scroll Container to "Fit Contents"

7. Each Scroll Item have Absolute Size of 200X200 and sperate by colors

8. Set the Scroll Container "Scrollable" option to True

9. Now we do the Magic Part 😁
   Set the Transform to Scroll Row as "RotateZ : -1.5708"

Add empty Columns at the beginning an the end of Scroll Container to fix correct position. Read Update 👇

Tadaaaaa! 🌟 With some trick we fool the platform to show a horizontal scroll.

UPDATE: Thanks to @matias6942
In order to show correctly all items into the Scroll Container, you can add empty Columns at the beginning and at the end of this container (specifying the “absolute size” parameter of this columns), padding the items (your Visible Columns “Scroll Items”) into the Scroll Container.

PS: You have to Set the Transform "RotateZ : 1.5708" to all your Scroll items as well. Pay attention its 1.5708 (Without "-")

Here is the link to my test Project which could help many of you guys 😉

Now it's your guys turn to help me to figure out how to align items in the right direction. cuz I could not see one of the colums properly.
Hope you Guyz contribute 🥳

( Sorry for any typos or bad English 😓 )

Link to my Example Project
https://x.thunkable.com/copy/903650461974da79744b7a9aaa7893f4

[matias6942]

@farzam-parto your clever solution works perfect for me. In order to show correctly all items into the Scroll Container, you can add empty columns at the beginning and at the end of this container (specifying the "absolute size" parameter of this columns), padding the items (your visible columns) into the Scroll Container.

Link to example project
https://x.thunkable.com/copy/a5c9ff0a73053805f92ffe1e8f7375c5

[domhnallohanlon]

Thanks so much for sharing @matias6942 and @farzam-parto - really appreciate your Community tutorial too.

We made a tutorial video on YouTube (crediting you, of course) about this for our users too:
https://www.youtube.com/watch?v=XYlOkaDg9Ho

Keep up the good work!

[jane-d-alt]

We are currently trialling an update to the Row component that supports horizontal scrolling.