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

**URL:** <https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795>\
**Category:** Announcements\
**Created:** [July 21, 2022, 3:36pm UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795 "2022-07-21T15:36:49Z")\
**Posts on this page:** 15\
**Page:** 2

<div class="post-metadata">

**Author:** ![mimostel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mimostel/32/107661_2.png) [@mimostel](https://community.thunkable.com/u/mimostel)\
**Post date:** [July 22, 2022, 9:42am UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/21 "2022-07-22T09:42:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mimostel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mimostel/32/107661_2.png) [@mimostel](https://community.thunkable.com/u/mimostel)\
**Post date:** [July 22, 2022, 9:48am UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/22 "2022-07-22T09:48:56Z")

</div>

> [@muneer](#):
>
> The main idea of the container is to change the layout behavior of the button

Well, as a “passionate” StP user trying to get to DnD, maybe my mistake is to look at new layouts literally as rows/columns … 😊 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.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 22, 2022, 9:52am UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/23 "2022-07-22T09:52:37Z")

</div>

> [@mimostel](#):
>
> container’s height fit contents, it’s width still fill container.

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.

> [@mimostel](#):
>
> I need to multiply, for example, a button on a row (horizontal layout)

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.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [July 22, 2022, 4:23pm UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/24 "2022-07-22T16:23:24Z")

</div>

Split this topic on July 22, 2022, 4:23pm UTC

A post was split to a new topic: [Layouts - Issues with loading/waiting icon](https://community.thunkable.com/t/layouts-issues-with-loading-waiting-icon/1971917)

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [July 26, 2022, 11:43am UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/25 "2022-07-26T11:43:31Z")

</div>

Split this topic on July 26, 2022, 11:43am UTC

A post was split to a new topic: [Help creating layout](https://community.thunkable.com/t/help-creating-layout/1976378)

---

<div class="post-metadata">

**Author:** ![jon.fawcett8aghe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jon.fawcett8aghe/32/136004_2.png) [@jon.fawcett8aghe](https://community.thunkable.com/u/jon.fawcett8aghe)\
**Post date:** [August 9, 2022, 12:31pm UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/26 "2022-08-09T12:31:27Z")

</div>

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

> [@mimostel](#):
>
> container’s height fit contents, it’s width still fill container.

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.

 ![Screenshot 2022-08-09 at 8.08.14 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/0/8045682d7363c314f08dad2852c620aef60bebc4.jpeg)

---

<div class="post-metadata">

**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\
**Post date:** [September 30, 2022, 2:32am UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/27 "2022-09-30T02:32:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tthompson41231](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tthompson41231/32/161401_2.png) [@tthompson41231](https://community.thunkable.com/u/tthompson41231)\
**Post date:** [October 10, 2022, 1:55pm UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/28 "2022-10-10T13:55:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 12, 2022, 2:19am UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/29 "2022-10-12T02:19:08Z")

</div>

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:

> [@Button not registering clicks properly](https://community.thunkable.com/t/button-not-registering-clicks-properly/2076316/6):
>
> That sounds promising but I’m not having much luck. I created a layout with a container that has a button inside. I gave the button a background color and text and saved the Layout component as a custom layout: But then when I go to select it as the DVL layout, it shows up blank (the last two or three entries are blank) and clicking in that area doesn’t do anything:

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 12, 2022, 8:50pm UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/30 "2022-10-12T20:50:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 12, 2022, 10:17pm UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/31 "2022-10-12T22:17:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chris\_Anderson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/chris_anderson/32/150776_2.png) [@Chris\_Anderson](https://community.thunkable.com/u/Chris_Anderson)\
**Post date:** [April 5, 2023, 10:25pm UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/32 "2023-04-05T22:25:59Z")

</div>

Removed this banner on April 5, 2023, 10:25pm UTC. It will no longer appear at the top of every page.



---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:13pm UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/34 "2024-11-08T13:13:04Z")

</div>

Closed on November 8, 2024, 1:13pm UTC



---

<div class="post-metadata">

**Author:** ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)\
**Post date:** [December 19, 2024, 4:13pm UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/35 "2024-12-19T16:13:46Z")

</div>

Archived on December 19, 2024, 4:13pm UTC



---

<div class="post-metadata">

**Author:** ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)\
**Post date:** [December 19, 2024, 4:29pm UTC](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795/36 "2024-12-19T16:29:35Z")

</div>

Unlisted on December 19, 2024, 4:29pm UTC



[Previous page](https://community.thunkable.com/t/join-us-in-beta-testing-the-new-layouts-component-rows-columns-for-the-drag-and-drop-interface/1970795.md?page=1)
