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

@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

:blush:

@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

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

1 Like

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:


And the result is as expected when I Web preview my try:

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

2 Likes

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

1 Like

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

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.

more specific: container’s height fit contents, it’s width still fill container. If both fit contents, is working.

3 Likes

Well, as a “passionate” StP user trying to get to DnD, maybe my mistake is to look at new layouts literally as rows/columns … :blush: I’m doing this because if I wanna work with clones, I need to multiply, for example, a button on a row (horizontal layout)… and need to define source button’s height/width in connection with screen’s layout, so the final result will show, lets say, 9 butons equally sized, that horizontally fill the screen.

1 Like

Let me confirm your findings. When you set either height or width to fit content the button shows in the computer preview but not in the mobile app.

I do hope to reach this stage soon. Now we need to fix the issues in the layout and then move to the clone function to see how it can be incorporated in this solution.

2 Likes

A post was split to a new topic: Layouts - Issues with loading/waiting icon

A post was split to a new topic: Help creating layout

[quote=“muneer, post:23, topic:1970795, full:true”]

I am seeing this same issue. With a non-scrollable screen, you usually don’t want all containers with height of fill. Here is a simple example that doesn’t work.

header and footer containers: height fit contents
content container: height fill container.

This works fine on the web preview but on a device, it collapses the contents of the header and footer. Setting the item inside the row to fit, fill, or absolute all produce incorrect results if the row is set to fit contents. Probably related: switching the inside item width between fit/fill doesn’t change anything. But switching the height to fill expands the width of the button instead.

2 Likes

Can’t wait to check this out! See how easy it would be if features of both platforms come in one place.

I definitely would love to try this. When is the release window for this update?

Are there known issues with creating and then selecting custom Data Viewer List (DVL) layouts in Drag & Drop? The layouts appear as blank lines in the selection panel.

I showed the problem here:

Okay, I’ve solved the issue with blank custom DVL layouts. I was saving the Layout in the component tree but it turns out that I need to save the Container in order for it to show up in the list of custom layouts within a project. I don’t know if I was supposed to be able to save a Layout but that part still isn’t working. Regardless, I can now use custom layouts created in DnD with Layouts as long as I select the Container before saving.

Edit: Except it’s not registering button clicks (a button inside the saved container) in the DVL. :frowning:

1 Like

Does anyone have a custom data layout that works and was made in DnD that they can share with me?

Sorry, not trying to hijack this topic… but it is related to Layouts.

Edit: Thunkable Staff are looking into this for me. I did discover something interesting: the click event is detected for the Container that the Button is in but the Button itself does not register a click event. So since the Container is wider than the Button inside of it, that’s the reason that “edge” taps seem to work. It’s actually catching part of the container.