Cloning a row inside a scrollable column

[tatiang]

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:

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

And I have my screen set up like this:

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

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?

[catsarisky]

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’.

[muneer]

What are the properties/settings of column4?

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

[tatiang]

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:

[catsarisky]

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?

[tatiang]

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.

[catsarisky]

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?

[tatiang]

I re-made it here:

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?

Creating a Beautiful App - Thunkable ❌ Design Challenge

[tatiang]

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

[catsarisky]

Try this?
https://x.thunkable.com/copy/cab57ac20c51aeaa41ce127092b5b97f

[tatiang]

You did it! Buffers… hmm…

[muneer]

@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.