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.
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.
@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
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.
After 2days of trying finally I came up with an idea! (Special Thanks to my GF )
First of all I created a Row which contains a Column which follow with 5 additional Colums (Which is our Scroll items)
We name The first Row as Scroll Row
The following Column will be called as Scroll Container
And each Colum inside that Container will be called as Scroll Item1, 2, 3, 4…
Now we set the Height & Width of our Scroll Row to “Fit Contents”
After that we assign the Height & Width of our Scroll Container to “Fit Contents”
Each Scroll Item have Absolute Size of 200X200 and sperate by colors
Set the Scroll Container “Scrollable” option to True
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 @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 “-”)
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.
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!
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
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.
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.