# Design practices in DnD

**URL:** <https://community.thunkable.com/t/design-practices-in-dnd/3327502>\
**Category:** Questions about Thunkable X\
**Created:** [November 6, 2024, 11:17pm UTC](https://community.thunkable.com/t/design-practices-in-dnd/3327502 "2024-11-06T23:17:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![fedegarcia30hzc97a](https://avatars.discourse-cdn.com/v4/letter/f/b38774/32.png) [@fedegarcia30hzc97a](https://community.thunkable.com/u/fedegarcia30hzc97a)\
**Post date:** [November 6, 2024, 11:17pm UTC](https://community.thunkable.com/t/design-practices-in-dnd/3327502/1 "2024-11-06T23:17:27Z")

</div>

Hi

Is there any design best practice document i can go through for DnD? Im struggling to have all my containers in place when i fill them with data during runtime.  
For example, i have a dashboard where some containers are fixed hight/wight but the last one will clone elements depending on the number or rows i read in a database.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/8/e8810d457df6bd382dcdd013c8e87d3dc805112d.jpeg)

Container 48, which is where im cloning the components is set as scrollable and fit container (which should be layout24 with 664px height)

When there are enough element all the screen streches…

> **[RPReplay\_Final1730934669.MP4](https://drive.google.com/file/d/19IQb9EYhq4vZzkHSnht6RQHp5OEK8ztA/view?usp=sharing)**
>
> Google Drive file.

Im also strugling to fit the layout size to fit the bottom of the screen in any device.

Thanks!

---

<div class="post-metadata">

**Author:** ![brianl](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@brianl](https://community.thunkable.com/u/brianl)\
**Post date:** [November 7, 2024, 12:12am UTC](https://community.thunkable.com/t/design-practices-in-dnd/3327502/2 "2024-11-07T00:12:13Z")

</div>

I would recommend either making your container scrollable so that it doesn’t have to compress or introducing pagination.

---

<div class="post-metadata">

**Author:** ![fedegarcia30hzc97a](https://avatars.discourse-cdn.com/v4/letter/f/b38774/32.png) [@fedegarcia30hzc97a](https://community.thunkable.com/u/fedegarcia30hzc97a)\
**Post date:** [November 7, 2024, 12:23am UTC](https://community.thunkable.com/t/design-practices-in-dnd/3327502/3 "2024-11-07T00:23:48Z")

</div>

Thats the weird thing, the container containing the cloned blocks is set to scrollable, but even then is compressing the full layout.

Ive manage to achieve by having two layouts and positioning the new one in runtime based on the first layout height, lets see how it works in different screen sizes…

Anycase managing positioning is quite complex as every device has a different size resolution.

Thanks!

---

<div class="post-metadata">

**Author:** ![fedegarcia30hzc97a](https://avatars.discourse-cdn.com/v4/letter/f/b38774/32.png) [@fedegarcia30hzc97a](https://community.thunkable.com/u/fedegarcia30hzc97a)\
**Post date:** [November 7, 2024, 12:48am UTC](https://community.thunkable.com/t/design-practices-in-dnd/3327502/4 "2024-11-07T00:48:03Z")

</div>

\*\*this is so frustating…\*\*Ive published the app in App Connect to check with test flight…  
As you can see, Layout24 is set to 370.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/e/4eab70b4b0304d26cffaf1806f800fbea92895e6.jpeg)

Layout25 is set at screen start as following

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/d/3d36bf5106228a67f78b259ea87d2804185537b9.png)

When testing in thunkable live app or webapp i can see everything correctly

 ![Captura 2024-11-07 a las 1.43.36](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/0/d090bc979c3af25e4e8b4f0eac23d76590dbcb98.jpeg)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/6/b66cb635ef74fd31c17181db56248a4d8a3f0d95.jpeg)

But in my iphone 13 testflight app i see a mayor gap

 ![Captura 2024-11-07 a las 1.37.35 (1)](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/d/8d864885de963cc0c07ab8243174e508aa5f2080.jpeg)

---

<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 15, 2024, 12:38pm UTC](https://community.thunkable.com/t/design-practices-in-dnd/3327502/5 "2024-11-15T12:38:34Z")

</div>

Hello @fedegarcia30hzc97a  
As I shared in a separate support channel, the second Container51’s height needs to be set to a specific size in pixels or percentages.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [February 13, 2025, 12:39pm UTC](https://community.thunkable.com/t/design-practices-in-dnd/3327502/6 "2025-02-13T12:39:24Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
