# Cloning a row inside a scrollable column

**URL:** https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774
**Category:** Questions about Thunkable X
**Tags:** clone
**Created:** [May 10, 2021, 7:48pm UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774 "2021-05-10T19:48:09Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### 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: [May 10, 2021, 7:48pm UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/1 "2021-05-10T19:48:09Z")

</div>

I’m making my own Data Viewer Grid without using that particular component because I want to connect it to Firebase data. What I want to create is a list of images+labels that can be scrolled. Something like this:

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/6/4697fc30b9448108f49c9191e839dcafed8ac348.png)

I’m using a clone block in the **legacy interface** :

![Screen Shot 2021-05-10 at 12.39.11 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/7/f7b76e859fcae059569b738fc338252515769146.png)

And I have my screen set up like this:

 ![Screen Shot 2021-05-10 at 12.39.25 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/3/33abb2be928eb4e110f0b0f81377c01935d4b882.png)

But when I preview it, the cloned rows overflow the boundaries of the column:

 ![IMG_01E7E801C820-1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/e/8e41d362b09f4328e3f2f6352eaaf61ae180582d.jpeg)

I want the yellow margins to appear as in the second screenshot above even after the rows are cloned. Is there a way I can limit the cloning area to the height of the column?

---

<div class="post-metadata">

### Author: ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)
#### Post date: [May 10, 2021, 8:40pm UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/2 "2021-05-10T20:40:39Z")

</div>

What are your settings for column4?

Hang on a second… your screen is set to scrollable, right? Try making sure the vertical alignment on the screen is ‘top’.

---

<div class="post-metadata">

### 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: [May 10, 2021, 8:58pm UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/3 "2021-05-10T20:58:07Z")

</div>

What are the properties/settings of column4?

Are there any other components above and/or below column4 to present it from re-sizing?

---

<div class="post-metadata">

### 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: [May 10, 2021, 9:03pm UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/4 "2021-05-10T21:03:11Z")

</div>

The screen has default properties. The column height is set to 60% relative. The row height is set to fit contents.

No, no other components:

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/1/015f961dd85e17be46986139dba9f9ddde4aa418.png)

---

<div class="post-metadata">

### Author: ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)
#### Post date: [May 10, 2021, 9:23pm UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/5 "2021-05-10T21:23:37Z")

</div>

So maybe I’m not picturing it right, but if you’re packing a whole bunch of clones of row 11 into column 4, what do you want it to do, if not expand and encroach on the yellow space?

---

<div class="post-metadata">

### 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: [May 10, 2021, 9:33pm UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/6 "2021-05-10T21:33:21Z")

</div>

If I add a row manually to column 4, it will just keep squeezing it in. And my assumption is if I set the column to scrollable, those manually dragged rows will be constrained to the size of the column but I will be able to see additional rows by scrolling.

That’s what I want the cloned rows to do.

But I just tried it manually and I was wrong. It _does_ overflow the column. Darn.

If you put a list viewer in a scrollable column, it works, right? But I don’t want to use a list viewer.

---

<div class="post-metadata">

### Author: ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)
#### Post date: [May 10, 2021, 10:06pm UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/7 "2021-05-10T22:06:08Z")

</div>

That’s weird. I’d have expected that setting column 4 to scrollable would pretty much fix you up.

Can you share a link to the project?

---

<div class="post-metadata">

### 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: [May 10, 2021, 10:52pm UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/8 "2021-05-10T22:52:07Z")

</div>

I re-made it here:

[https://x.thunkable.com/copy/3af6546f9490a8b891fae4caa7fe1817](https://x.thunkable.com/copy/3af6546f9490a8b891fae4caa7fe1817)

It’s also filling the whole screen with the column’s background color even though it’s set to 60%. Not sure what that’s about.

@darren you pretty much do what I want in this video… any advice?

[![](https://img.youtube.com/vi/FNqo62zsNeQ/maxresdefault.jpg "Creating a Beautiful App - Thunkable ❌ Design Challenge") ](https://www.youtube.com/watch?v=FNqo62zsNeQ)

---

<div class="post-metadata">

### 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: [May 10, 2021, 11:04pm UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/9 "2021-05-10T23:04:53Z")

</div>

It sort of works as a whole scrollable screen although I really want a column so that I can limit the size of it on the screen.

[https://x.thunkable.com/copy/bf087880250c933a0f2df78c594a509b](https://x.thunkable.com/copy/bf087880250c933a0f2df78c594a509b)

---

<div class="post-metadata">

### Author: ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)
#### Post date: [May 11, 2021, 1:38am UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/10 "2021-05-11T01:38:03Z")

</div>

Try this?  
[https://x.thunkable.com/copy/cab57ac20c51aeaa41ce127092b5b97f](https://x.thunkable.com/copy/cab57ac20c51aeaa41ce127092b5b97f)

---

<div class="post-metadata">

### 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: [May 11, 2021, 2:13am UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/11 "2021-05-11T02:13:27Z")

</div>

You did it! Buffers… hmm…

---

<div class="post-metadata">

### 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: [May 11, 2021, 10:31am UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/12 "2021-05-11T10:31:31Z")

</div>

> [@muneer](#):
>
> Are there any other components above and/or below column4 to present it from re-sizing?

This is the reason I ask this question. From experience, even if you have components other than row/column it won’t work.

---

<div class="post-metadata">

### 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, 1:22pm UTC](https://community.thunkable.com/t/cloning-a-row-inside-a-scrollable-column/1274774/13 "2024-11-08T13:22:33Z")

</div>


