Create Horizontal Scroll (Swipe Like) Row

Great!

Now what about putting content in the boxes or in a real-world interface…

Been road blocks from this being useful.

The example below is a scrollable form that can accomodate any number of rows and any number of elements per row using nested loops and CLONE blocks. The text comes from firebase, but the photos are hard coded (I haven’t gotten that far populating my database).

Happy Thunking!

4 Likes

Perhaps using the Canvas to create something?

The other way this is possible is to use a web viewer, and dynamically add items to it in a row, using a horizontal lists or even good-old HTML tables.

If I get this working I will report back.

Hi @drted Bravo!

I spent hours trying to make this work with out all the empty white space or content displaying at 90 degrees.

Can you share the project with us, please?

This is a cool feature, however it:

  • Doesn’t support webviewer
  • The scroll bar is way above the row

I am trying to find other ways to do scrolling rows. Good job on making this though.:grin:

Thanks for your patience.

Here is a very flexible solution. Briefly, I added an additional column “Master Column” which eliminates the extra space issue of the original (and BRILLIANT) solution. Instead of creating multiple “scroll items” as outlined in the original solution, I’ve created just one call ScrollTemplate which will be cloned (see below). I also made the form Scrollable to accomodate multiple rows.

You are still stuck with square list elements. Because of the z Rotation that makes this solution work, changing the size and the shape of the template is tricky. Plan to use squares or spend a lot of time fiddling around with margins, padding, etc.

The start event triggers a loop through a JSON tree (this could easily be moved to a button).

The key is the JSON tree.


The "Parent’ object “APP Shows” is a list. Each item in the list contains an Object (show). Each show represents a ROW to be created in the form. The NAME property is used for the row label (lblContainer). Each SHOW object has a list CHARACTERS. Each character object will be mapped to the cloned Scroll template.

Then the Fill List Block will use the CHARACTER object (regardless of how many there are), to generate a new label, image, or button component within the template.

Here is a GIF from this simple tree. But it could have any number of SHOWs, CHARACTERs, and CHARACTER properties.

Here is a remixable project lnik
https://x.thunkable.com/copy/8282b1f9a313e25493dacdd29a0447ad

1 Like

I also have been doing some testing of my own. I have noticed the scrollbar is way up so I made this:
Scroll Test

It allows you to control where the scrollbar is by adjusting the height(from 200) and I prefer 220 with a top padding of 20.

1 Like

Thanks @drted I’ll try this out this weekend.

Unfortunately this trick is uncontrollable, nothing responds as it should and you can’t really use it in an serious interface.

I’m sad now.

It is not idea, that’s for sure. And the scroll bar at the top is goofy.

I don’t disagree wiith you, but I would like your information on what you mean by

  1. Uncontrollable (no settings? UI misbehavior, etc)
  2. “Nothing” responds as it should. What elements or actions are causing unexpected responses

These might be issues that could be tweaked to get something better. Again, not ideal and not full-featured for sure. And not a substitute for Thunkable adding horizontal scrolling frames

I’m trying to make a scrolling list of buttons that are not square and that only fit in a row high as the buttons are

You are 100% right. Changing the size or the shape is REALLY touchy and does not work well.

The solution pretty much sticks you with squares. Because of the rotation, changing anything is mind bending (at least for me). :frowning:

Here is an improved version using the Custom Data List Viewer. Much faster and fewer blocks!!!

2 Likes

It is not working.

Link of my app: Thunkable

Any update on this being an actual feature in Thunkable without having to hack it?

@usamobileappsllc it’s on the roadmap, as we add more features to groups this will hopefully get added.

Are you able to complete your app with the current method?

Awesome! Yes I think this method will work, just wanted to see if there was an update on an official feature coming soon. Loving Thunkable as always!

It seems like you’ve posted twice with the exact same content. Can you please delete one of your posts?

This solution works great on my iPhone with Thunkable Live. However, it doesn’t work (blocks stay vertical) on publishing a web app. Does anyone have a solution that works in web, too?

2 Likes

It doesn’t work for me. I am unable to swipe all the way right.