Is Horizontal Scrolling Native Now?

Questions about Thunkable
1

So I initially thought that setting a row’s scrollable to true allowed for horizontal scrolling since doing it to a column makes it vertical scrolling and I learned that I was very incorrect. I followed the tutorial by Jimmy and these following community discussions (1, 2) and the horizontal scrolling works, but it seems to work well if the placement is is centred as when trying to keep the scrollbar in a certain position (e.g in between other sections of the page) that would not make it centred, when cloning the component, it always seems to want to go back to the centre. Has anyone found a solution to this? Here is an example of what I mean:
uyhjtr

I tried putting the row inside the column instead (opposite of the video and posts) but now the scroll area fills the screen beneath it but stays in position:
uykf

Any clues/fixes?

Update:
SOLUTION
So for anyone who falls into the same problem, I found a solution with the help of Muneer (at least one that works for my case), it’s quite simple too and handles dynamically generated components perfectly.

  1. Create a column and give it a definitive height and width
  • In this example, I gave mine a width of 83% and a height of 80px
  • The 83% is just so that the componenets don’t touch the screen edges in a responsive format, I prefer this sizing but you can achieve the same goals with margins/padding as well so long as its % and not px
  • The 80px is so that the componenents can be seen in full without clipping, I’m sure there are other ways to achieve this, but this works well for me
  • Also my screen is set to vertical allignment = top

  1. Create a row and set horizontal and vertical fill to fit contents, and set scrollable = true

  2. Add your componenets as you like to this row, but I think (can’t confirm) they need to have deinitive PX sizing

  • For my case, I wanted the row to fill up with components based on the user, and for some it may be a lot so it needs to be scrollable. I just tested it with buttons (75px height and width) and I gave them margins to the right so that they do not touch each other

That’s it really, a simple 3 step process for your horizontal scrolling. The issue of the row taking up the entire screnn below it is gone, as is the issue of the row moving as more content is added. View the GIF below to see the results!
scrollino!

NOTE: On previous threads discussing how to implement horizontal scrolling via a Z rotation of 1.5708 radians, I saw some mention of hiding the scroll bar or changing it’s look. Unfortunately, I don’t know if that’s possible or how to do it. If the fact that the scrollbar is right beneath the components goes against your goals, my untested suggestion would be something to with a column/row with the same colour as your background layerd over the position of the scrollbar with a different height (I would assume that is its Z index) and maybe changing the padding-margin of the components or row so that the scrollbar is further below the components. Just an idea.

1 Like
2

In the first GIF, I see no scrolling, just adding components.

In the second GIF, the scroll bar (indicator) will be positioned in the bottom of the container taking its computed size from the settings. Without giving details of the settings of each component, it is difficult to guess something.

[Edit]
one trick to see the effect, add more components to the screen and right below your row/column that you are testing with and observe where the scroll indicator goes.

1 Like
3

So for the first one I was testing what would happen when componenets are created by the user on the live app, my gif was just too long to upload for the scrolling part after teh componenets have been added.

I did try adding more componenets under but they went “below” the bottom of the screen, though you have made me notice that I coudl try putting them all in a column with definitive height and see what happens then.

As always, thanks for the help Muneer.

1 Like
4

Are you trying to say that you have your screen scrollable too? You should start with non-scrolling screen.

In the other hand, containers (rows and columns) in a screen should have a pre-defined size to be scrollable and / or scrolling. Setting any of the components as Fit contents or Fill container prevent scrolling to take effect.

1 Like
5

No my screen isn’t scrollable, I gave the scrolling row a fit contents, but even if the contents do not cover the entire screen, I supposed the problem could be with the Z roation somewhere.

Though I did follow up on the aforementioned hunch and removing the Z transformation, and it worked. I’ll update the original post with a tutorial in case anyone has the same problem as it fixed the all issued of the scroll row moving when contenet is generated.

Thanks again for troubleshooting with me Muneer!

1 Like
6

Hi @kareem - here’s a new example of how to add horizontal scrolling to you app!

2 Likes
7

I tried the method in the first post (“updated solution”) and on an iPhone 11, it scrolls horizontally but also vertically which defeats the purpose a bit. In a web preview, it doesn’t scroll at all.

1 Like