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