Join us in Beta Testing the new Layouts component! (Rows / Columns for the Drag and Drop Interface)

Announcements
1

Join us in Beta Testing the new Layouts component! (Rows / Columns for the Drag and Drop Interface)

You may have noticed a new beta component on your components panel: Layouts!

We’re excited to share a preview of Layouts to our most loyal and close Thunkers to test. This component will allow you to design screens in a way that’s more responsive to different screen dimensions. In the past, your components simply stretched to fill the screen. While this ensured that your end users could access all parts of the app across different devices, it didn’t always look the best. By combining Layouts with the Resize Mode property, you will be able to create dynamic layouts that look great across a range of devices.

Without Layouts

a) iPhone 12 Pro
b) Ipad Air
c) Samsung Galaxy S8+

a)b)c)
Desktop

With Layouts

a) Iphone 12
b) iPad Air
c) Samsung galaxy S8+
a) b) c)

Desktop

If you’ve ever used our ‘Snap to Place’ builder, then Layout components will feel familiar (in fact, it helps power our updated project converter - more information to come soon about this). The Layout component can house special Container components which define how components within them are arranged: horizontal containers place components side-by-side in a row and vertical containers stack components on top of one another. One of the great benefits of these containers is that you can set the alignment of components within the containers.

|281.8240469208211x295

Using the Property Panel for a Layout or Container component, you can insert additional Container components, even nesting them within another Container component. If you need to change the order of containers, simply drag them within the Component Tree to the position you desire.

Please note that, at this time you must use the Component Tree to drag components into Layouts; however we plan to eventually allow creators to drop them directly into Layout components much like we do with Group components.

While we’re excited to share this new experimental feature with you, we want to remind you that it’s still in beta and therefore may still change before we release it more widely. This also means you may experience bugs which is why it’s still in beta. The most important thing we can ask you to do is clearly document and report any issues as they arise. This will allow us to fix, iterate upon, and then finally release this component out of beta faster!

We’d love your feedback on ways to simplify the experience! If you are not seeing this component but would like to take part in the beta testing and provide feedback please send a message to Cassandra with the message “I want to join beta testing” and the email you sign into thunkable with.

Happy Thunking,

Jared

7 Likes
3

Please share all of your feedback related to this component here!
https://community.thunkable.com/c/beta-testing/layouts/86

1 Like
6

Can’t wait to try this out!

Camp ends tomorrow so I should have more time after that. :wink:

4 Likes
7

Can’t really go through all the description at the moment,but is this available across board?
I mean for both stp and dnd

8

No. This is a Drag and Drop feature that’s been lacking for a while now.

1 Like
9

I hope thunkable is not abadoning stp,
I would say stp version of the thunkable also had similar experience ,why not fix that too

1 Like
10

StP actually works quite well! That’s why my app is still in StP. The layout ability of StP has been far superior to DnD. Once I can get my app to respond in DnD like it does in StP, I’ll make the jump. It’s getting there, but not quite yet.

5 Likes
11

Does this open up the ability to do “fit contents” like there is in StP? Like have the label fit the contents of the text assigned? This has been one of tbe struggles with DnD, I love the ease of use. However getting components to be responsive in size is hard. Since you have to hard code the sizes into the project.

1 Like
12

Hello. Tried, but it said that page is private … I don’t have access to it…
To be short, I never tried DnD seriously before, as I really like the way I’m on charge in StP… but as I see that DnD is the future, I started my new project using that.
The first thing I encounter was the proper alignment (row/columns where I can set almost everything to scale with screen was exactly what i wanted in StP and always working as expected for me). So when I got this new feature in DnD, I was very excited to try it.
But, I encountered my first issue: put a button inside a layout and it doesn’t appear on Thunkable Live Test (acting like it’s invisible). Checked the property - visible both for button and layout.
Duplicated my button and moved the duplicated outside the layout… it shows.
Web preview works fine… The issue is on Thunkable Live (running on an Android device).
As web preview doesn’t fit my needs to test further, I’ll wait until I can test on my device with Thunkable Live :thinking:

2 Likes
13

@jared quick question does everyone have acces to this or only beta testers?
I’d love to test it out but not a beta tester so I’m not sure.

Edit:
I just got time to check. Non-beta testers cant preview this yet.

1 Like
14

:blush:

15

@jared I will say, my initial impression is, this is great! I converted to DnD from my most recent work and it converted all of my rows into containers and created a layout for those containers. My loading icon wasn’t in a row, so I added a new one and it lined right up! This just might work! :grinning:

1 Like
16

At this stage, the containers inside the Layout can have fit content. However, when you add buttons or labels inside the container they will have the option of fit content and fill container.

Having said that, it seems height controls width and width does not do anything. (@jared )

Currently, you need to first place the button any where in the screen and then use the component tree to move the button inside the container.

image
image259×212 2.76 KB

1 Like
17

I’m sorry my friend, as English is not my first language, maybe I didn’t explained too well.
I don’t have any issue at design stage:

001
0011126×661 22.4 KB

And the result is as expected when I Web preview my try:
002
0021177×652 17.5 KB

But when I try Thunkable Live on my Android phone, all i get is a blank screen.

2 Likes
18

This is strange. See this from my mobile. I also changed the button size to fill container.

Screenshot_2022-07-22-12-29-21-12_2bbfbfee96a5dfce998f962ebb8b5da3
Screenshot_2022-07-22-12-29-21-12_2bbfbfee96a5dfce998f962ebb8b5da31080×2400 99.4 KB

1 Like
19

Thank you, you gave me an ideea.
So I put my Button to fill container… and it shows, just as you did.
Mine was different, but I assume that It doesn’t supposed to be an issue, but it is:
Try to set absolute values for button, then container to fit contents… and you get a blank screen :thinking:

1 Like
20

I guess, I would use absolute value when I want it outside the container. The main idea of the container is to change the layout behavior of the button. But I will try.