Columns and rows layout

I’m working with some students to design an app in the free version of Thunkable. We are trying to use the “column” and “row” functionality to get better layout control. However, we can’t find the “column” and “row” components. Are we missing something or are they not available in the free version?

Kind Regards

Colleen.

3 Likes

They are available in the free version (almost everything is) but only in the older snap-to-place interface. You’re probably using the newer drag-and-drop interface which has a group component instead of row and column components. I haven’t found the group component to be all that useful but someone else could prove me wrong.

When you create a new project, there is a checkbox to “try it out.” If left unchecked, the snap-to-place interface is used.

3 Likes

you must be using the drag and drop and you can only use it in the version where u can place stuff

1 Like

Just going to chime in here to add that you don’t even really need rows and cols with the latest version since the Drag and Drop editor allows you to position the components anywhere you want on the screen (components can even be layered on top of one another!)

What sort of apps are you building with your students?

3 Likes

Thank you everyone for your help. The students are creating a menu home page. They have a series of buttons that take them to other screens. What they are finding is that they create a button and put a label underneath it. The label position changes depending on whether it is displayed on a phone (and it differs between phones) or in the web preview. I thought the problem was that she was using absolute position rather than relative positioning and I thought using rows and cols was the way to achieve that. However, if you have another solution, I’d be keen to hear it.

If grouping is the way to do it, should she group the label and the button?

Thanks again. I’m really impressed with such fast responses for a newb! :slight_smile:

Kind Regards

Colleen.

3 Likes

Here’a a legacy project that shows how to do this with only two screens (I must update it to Drag and Drop)


If you use the latest Drag and Drop editor it has smart guides that allow you to left, centre or right align components directly on the screen like this:

2 Likes

Thank you again. I think the red alignment bars may do what we need. I’ll let the girls know and see how they go with it. Greatly appreciated!

2 Likes