Scrolling thumbnail photos within column boundary?

I’m trying to make a scrolling list of photo thumbnails. I created a column with top and bottom margins of 40 pixels. The column has scrolling enabled. I then put a row inside the column. The row contains three image components and its height is set to fill contents.

I’m using a clone block to clone the row as many times as needed to fit all of the photo urls in a firebase bucket:

Screen Shot 2020-12-23 at 2.49.46 PM

The thumbnails appear correctly but they exist above and below the margins of the column that I created. The screenshot below doesn’t show the additional three thumbnail images above the top ones which I can see by swiping down on the screen.

Just wondering if there’s a better way to do all this…

Is the scrollable column set to fit contents, fill window, or some predetermined size?

1 Like

ALLLMOST BUT space around may make it wreck

make it center alignment for screen
and download ios apk and try
and make it scrolllablle

The trick is to play with both hight and width of the column. For my case, I had the hight to “Fill Contents” and the width to “Fill Container” and it worked. :grin:

@muneer Thank you for that insight. I had the enclosing column set to fill container/fill container. With it changed to the height set to “fit contents” it doesn’t look any different for me.

1 Like

Did you check the width too?
It worked for me with a combination of height and width. I don’t have a good explanation what the width had to do with it but it only worked this way.

I’ve tried a few different combinations but I’ll keep trying. Nothing seems to change the format at all.

1 Like

Sorry @tatiang,
I actually faced this problem and made a note of the fix. It was first week of August. I guess Thunkable developers already changed that behaviour which means next time I visit my code I would face the same.

Sorry again

@muneer No worries! I always appreciate your help and even if it doesn’t result in a solution… it gets us closer.

1 Like

I don’t know what I changed but it’s working now. Here are the properties for the large column that contains a small row with the three image components:

1 Like

Another design approach would be to replace your main column with a row and set its flexWrap property to Wrap. Then you just need to create clones (or just create new ones per our other discussion :wink: )of your thumbnails which will wrap when your screen’s width can’t accommodate more. This is a REALLY powerful trick. If you want to control how many thumbnails you will have per “row” then consider resizing them as needed using the “Device > Screen Width” property block by dividing its value by the number of thumbnails you want to have per “row” i.e. 3 for 3, 4 for 4 etc. of by setting their width to 33% for 3, 25% for 4 etc. There are so many things and approaches…




I’m curious about the performance. How is the speed of rendering on a device vs. The data grid viewer?

Sometimes the data grid is not an option i.e. when you are using JSON content stored in a local variable. I would LOVE to see the data lists and grids being able to use JSON or objects stored in local variables. In terms of performance, consider that (afaik), data grids don’t show their content as they are getting created so you should measure the equivalent with the custom solution described in my previous response. Also, I don’t think there is a way to define how many (in this case) thumbnails across will be displayed; the number is always 2, right?


1 Like

I believe you are stuck with 2, correct.

1 Like

Oh my… I completely missed the “Create your own table” option when creating a new data source so, yes, you are right, it is doable though it takes some effort to get it right. Thanks!

1 Like

It’s slow, slow, slow. Trying to address that here: Setting a button's Border radius with Any Components - #11 by Deluxe