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:
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:
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.
- 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
Create a row and set horizontal and vertical fill to
fit contents, and set
scrollable = true
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!
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.