# Scrolling thumbnail photos within column boundary? **URL:** \ **Category:** Questions about Thunkable X\ **Created:** [December 23, 2020, 10:54pm UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671 "2020-12-23T22:54:07Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [December 23, 2020, 10:54pm UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/1 "2020-12-23T22:54:07Z")
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. ![Screen Shot 2020-12-23 at 2.49.30 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/6/964ae00d639e09abd2e21a9da9f2aaf221b0c987.png) 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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/8/38336bc77357c43f741d65324fc55b0ec2a57b49.png) 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. ![IMG_30BC3247537D-1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/8/c809cb17ffdb914859d77f4d11eed617a4b16590.jpeg) Just wondering if there’s a better way to do all this… ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [December 24, 2020, 3:29am UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/2 "2020-12-24T03:29:43Z")
Is the scrollable column set to fit contents, fill window, or some predetermined size? ---
**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\ **Post date:** [December 24, 2020, 4:09am UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/3 "2020-12-24T04:09:45Z")
> [@jared](#): > > some predetermined size? ALLLMOST BUT space around may make it wreck ---
**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\ **Post date:** [December 24, 2020, 4:10am UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/4 "2020-12-24T04:10:59Z")
make it center alignment for screen and download ios apk and try and make it scrolllablle ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [December 24, 2020, 6:05am UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/5 "2020-12-24T06:05:32Z")
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. 😁 ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [December 24, 2020, 7:01am UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/6 "2020-12-24T07:01:48Z")
@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. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [December 24, 2020, 7:16am UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/7 "2020-12-24T07:16:44Z")
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. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [December 24, 2020, 7:25am UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/8 "2020-12-24T07:25:33Z")
I’ve tried a few different combinations but I’ll keep trying. Nothing seems to change the format at all. ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [December 24, 2020, 8:49am UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/9 "2020-12-24T08:49:08Z")
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 ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [December 24, 2020, 8:28pm UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/10 "2020-12-24T20:28:33Z")
@muneer No worries! I always appreciate your help and even if it doesn’t result in a solution… it gets us closer. ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [December 24, 2020, 9:35pm UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/11 "2020-12-24T21:35:18Z")
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: ![Screen Shot 2020-12-24 at 1.34.41 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/8/48720f7f396caa4159ea4b51b87d577fc1e65a33.png) ---
**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\ **Post date:** [December 27, 2020, 12:11pm UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/12 "2020-12-27T12:11:35Z")
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… Konstantinos ---
**Author:** ![drted](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/drted/32/92694_2.png) [@drted](https://community.thunkable.com/u/drted)\ **Post date:** [December 27, 2020, 3:34pm UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/13 "2020-12-27T15:34:43Z")
@tatiang, I’m curious about the performance. How is the speed of rendering on a device vs. The data grid viewer? ---
**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\ **Post date:** [December 27, 2020, 3:39pm UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/14 "2020-12-27T15:39:48Z")
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? K ---
**Author:** ![drted](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/drted/32/92694_2.png) [@drted](https://community.thunkable.com/u/drted)\ **Post date:** [December 27, 2020, 3:43pm UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/15 "2020-12-27T15:43:16Z")
> [@Deluxe](#): > > I would LOVE to see the data lists and grids being able to use JSON - Check out my newest post [JSON Bound Data List Viewer - No More Cloning!](http://community.thunkable.com/t/json-bound-data-list-viewer-no-more-cloning/1041807) > [@Deluxe](#): > > 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? I believe you are stuck with 2, correct. ---
**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\ **Post date:** [December 27, 2020, 3:56pm UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/16 "2020-12-27T15:56:27Z")
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! ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [December 27, 2020, 5:55pm UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/17 "2020-12-27T17:55:21Z")
It’s slow, slow, slow. Trying to address that here: [Setting a button's Border radius with Any Components - #11 by Deluxe](http://community.thunkable.com/t/setting-a-buttons-border-radius-with-any-components/1041737/11) ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 12:19pm UTC](https://community.thunkable.com/t/scrolling-thumbnail-photos-within-column-boundary/1041671/18 "2024-11-08T12:19:22Z")