Create Horizontal Scroll (Swipe Like) Row

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.

Preview of Example GIF

(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)
Hope someone help me and other who may have same problem.

3 Likes

Hey @farzam-parto,

Thanks for sharing that gif - very helpful! :smiley:

I feel like some one shared an example like this before, but I can’t remember where it is.

To achieve an effect like this, set the row with to 200% and then use the component tree to organize the tiles or buttons then inside the row.

Hope that helps!

3 Likes

Thank you for fast Reply,
I have done so many tests, with all kind of options but still could not find the solution.

I create a Row with absolut size of 1200px ( I have tried with size of 200% as well ). I put 4-6 column/buttons with right-margin of 33px inside of that Row. I made that Row as Scrollable true but nothing happen!
I think it is something which will help many others.
We all will be thankful if someone have solution to solve this problem and share it with us. :slightly_smiling_face::pray:

2 Likes

I had the same problem with a project that I was working on. @actech had shared a solution in the past but for some reason it doesn’t work anymore

2 Likes

This project works on iOS 12.2, but it does not work in the Memu emulator (Android).

https://x.thunkable.com/projects/5ce66b0329faf69c27d0de1e/project/properties/designer/

1 Like

Thank you @Nenye & @actech for your contribution.

@actech I tested your shared link and as you mentioned, it’s not working on Android device! I tested on IOS device as well, actually it’s works but not the way I expected. it’s more looks like a floating image on the screen which you can fly it around! But better than nothing :smile:

Hope we find some way to done this :sweat:

2 Likes

Yes, for simplicity, I made a floating image, but you can instead use small images on the buttons, as in your example gif. But it will not be possible to eliminate the floating of images vertically.

I started an issue topic in Thunkable’s github.
I Hope someone respond to it. I got a respond which was kind of disappointing cuz they told me it is not immediate issue for them and they will working on it in the future.
Here is the link of topic in github, hope you guys join the discussion in the topic. cuz it’s depend to us to make this issue immediate for them.

Link to Github topic

https://github.com/thunkable/thunkable-issues/issues/163

2 Likes

Hi again Guys,

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

  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 :grin:
    Set the Transform to Scroll Row as “RotateZ : -1.5708”

  10. Add empty Columns at the beginning an the end of Scroll Container to fix correct position. Read Update :point_down:t4:

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

UPDATE: Thanks to @Matias_Zamora
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 :wink:

( Sorry for any typos or bad English :sweat: )

Link to my Example Project

https://x.thunkable.com/copy/903650461974da79744b7a9aaa7893f4

18 Likes

Wonderful ingenuity @farzam-parto, thanks for sharing! :tada:

5 Likes

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

5 Likes

Amazing :star_struck: Well done @Matias_Zamora

I’ll update the solution post with your idea about Empty Columns

Thank you for your collaboration :hugs: :pray:

3 Likes

Can you create a scrollable row with rectangular components?

faithfully this trick is quite great.i’m loving it!thanks

3 Likes

Yes Why not? You can put whatever you want in your Columns!
Look at the @Matias_Zamora’s example project.

Your test project, unfortunately, does not work correctly on iOS, but I really liked the idea and I finalized it. By the way, your idea allows to create a custom Sidebar!

3 Likes

Actually it’s work like a charm on both IOS & Android Devices. I tested on Samsung Galaxy Note 8, iPhone 6 and Android simulator on MAC. Scroll works perfectly on all of them.
Give it another try with --> Matias_Zamora’s example

2 Likes

I was talking about the project “Here is the link to my test Project”.

In your example ( Matias_Zamora’s example) left and right are empty white fields specified by Columns. I would like to see the size of these fields on the iPhone 6s screen. But this is not important to me, since in my example I do not use this fields.

@domhnallohanlon

Please support horizontal scrolling/swiping.

This trick is not usable displaying text and images rotated at 90 degrees. Many problems with this that makes it not usable for a professional project.

4 Likes

I’ve remixed this great solution to dynamically add columns, so you can make a data driven left-right scrolling control

3 Likes