Varying Row / Column size

Thunkable Discuss
#1

When I make rows or columns they are always evenly distributed (for example, they are each 3 inches tall or wide). Obviously, my app would be pretty lame if everything is symmetrical.

Rob Shoemaker shared a link with me (at bottom). So I think what I’m trying to do is “flex grow” but I’m not sure how to do this in thunkable. Can anyone put this in layman’s terms?

Using my below image as a guide, I’d like to say, Row 1 is 2-tall, row 2 is 4-tall, and row 3 is 9-tall. Then the computer can like work out the math. So if it’s on a 15-inch screen, row 1 is 2 inches. Or, another way of putting it, row 1 is 2/15ths of the screen. etc. You get the idea. I just don’t see these options in thunkable / understand how to use them.

screen%20sample

Any help much appreciated. Thanks!

#2

The Flexbox properties are located in the properties panel of the Advanced tab in the Positioning category.

#3

By default I think there is always a 1 in FlexBox, and a # in Flex Grow. So I just input my numbers in Flex Grow - correct? Or do I overwrite the values in FlexBox?

#4

Use flexGrow. Enter 1, 2 and 3 for Row flexGrow.

#5

Thanks. I don’t see “Row.FlexGrow” but I entered the values in FlexGrow and it seems to do the trick. Thanks so much for the help.

#6

I would just use relative size for the rows, like in this example:

https://x.thunkable.com/projects/5b3b89dbeb6b916a4ce2b283/Screen1/designer

Set the row height to “relative” and in the box below that, specify which percentage of the screen (or container) the row should be. Leave one row to default, so that that row will fill the remainder of the space.

Hope this helps!

Regards Rob

BTW, you can repeat the trick within the rows, or columns. What I usually do is make a sort of a top level layout, for example header takes 10%, footer takes 10% and main takes 80%. Then I divide the main area again, for example 2 columns that each take 50%. Then I subdivide the columns again, etc. And then within the lowest level of layout, I use flexbox to arrange the items within that container. This way the overall “look and feel” will remain consistent, regardless of screen size and/or orientation (within some margin of course :wink: )
You can also play with margin and padding under the advanced tab, to make sure that there is some spacing between the columns/rows and/or containers.

#7

Thanks Rob - very helpful

#8

No thanks.
You might also want to play with “absolute size” and/or max/min width/height under the advanced tab.
For example, if you have a menu bar and set the height to 10% it will probably look fine if the device is in portrait orientation. However, if you rotate the device, 10% of the height (which is actually the width, if you get what I mean) will look like crap. So for those type of items, you can also set the absolute height in pixels, in which case the height will always be exactly the same regardless of the orientation of the device. (You can get the same effect by setting min height and max height in the advanced settings. If you use this, you can even have a little bit of more fine grained control to make sure that everything looks good in the different orientations)
You can also mix all these types of settings, for example by setting header and footer to an absolute size, and have the main area fill the rest of the screen. Then within the main area, you can use relative sizes to have the rows/columns resize if the screen size changes (or device is rotated). etcetera
Another trick that you can use is to have the “lowest level” of controls with absolute sizes (e.g, buttons that you always want to have the same size) and then set their containers to “Fit Contents” (and do some spacing using “margin” and “padding”). That way, the containers will resize automatically to nicely enclose the buttons.

1 Like