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:
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.
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.
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 )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…
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?