# \[Solved\] Where is the option fill container?

**URL:** <https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249>\
**Category:** Questions about Thunkable X\
**Tags:** solved, beginner\
**Created:** [September 24, 2023, 4:05pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249 "2023-09-24T16:05:20Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![jksadmginvbt](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jksadmginvbt/32/100484_2.png) [@jksadmginvbt](https://community.thunkable.com/u/jksadmginvbt)\
**Post date:** [September 24, 2023, 4:05pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/1 "2023-09-24T16:05:20Z")

</div>

Hi there, I tried to find in the community but I couldn’t find. Where is the option to set “height 100%” or fill container on Thunkable? I tried to see using drag and drop, old ui, but I cant find.

If I add the % on H or W field, it doesn’t work as well.

Please, helpe me

---

<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:** [September 24, 2023, 8:00pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/2 "2023-09-24T20:00:36Z")

</div>

Waiting on this feature too

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [September 25, 2023, 3:44pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/3 "2023-09-25T15:44:31Z")

</div>

Hey @jksadmginvbt - welcome to the Community 👋

Two options to do this;

The first (and my preferred) option is to use the [Layout component](https://docs.thunkable.com/app-design/ui-components/basic-components/layout)

 ![fill_container](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/e/9eadc157cd01e4635474bde424f531b79cab8ed9.png)

Any component that is placed inside the layout component will now have several new margin, padding and sizing options including the ability to set the height to whatever percentage you like

The second option, which might make sense depending on your use case, is to dynamically set the size of all the components at run-time using the blocks.

 ![blocks_dimensions](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/9/799ea261ca728b1a811348ab26c644a9a711d6b0.png)  
For instance, if you wanted the width to be 33% all you’d need to do here is divide the Height by 3

Hope that helps

---

<div class="post-metadata">

**Author:** ![jksadmginvbt](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jksadmginvbt/32/100484_2.png) [@jksadmginvbt](https://community.thunkable.com/u/jksadmginvbt)\
**Post date:** [September 25, 2023, 3:55pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/4 "2023-09-25T15:55:34Z")

</div>

Thanks a lot, when I deleted the project and create a new one without tick “Drag and Drop” option it showed up. Now it’s working. Thanks

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [September 25, 2023, 3:59pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/5 "2023-09-25T15:59:48Z")

</div>

> [@jksadmginvbt](#):
>
> and create a new one without tick “Drag and Drop” option it showed up.

That’s the older version of the platform, called “Snap-to-Place” or StP for short. I would recommend sticking with the version you were previously on (Drag-and-drop/dnd) as StP receives very few updates these days.

For instance, DnD is currently adding support for [custom components](https://community.thunkable.com/t/be-a-part-of-testing-our-latest-beta-feature-custom-components/2602086)

---

<div class="post-metadata">

**Author:** ![jksadmginvbt](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jksadmginvbt/32/100484_2.png) [@jksadmginvbt](https://community.thunkable.com/u/jksadmginvbt)\
**Post date:** [September 25, 2023, 4:14pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/6 "2023-09-25T16:14:57Z")

</div>

I’d love to, but the problem is, on DnD I can’t find the option to set elements width 100% or height 100%, fill container do not appear.

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

---

<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:** [September 25, 2023, 4:22pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/7 "2023-09-25T16:22:05Z")

</div>

@jksadmginvbt Throw that webviewer in a Layout and you’ll be able to do all of that.

 ![Screenshot 2023-09-25 at 12.20.42 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/5/9559e4b44de902cebcb96e892c7cb180e84d5f3a.png)

---

<div class="post-metadata">

**Author:** ![jksadmginvbt](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jksadmginvbt/32/100484_2.png) [@jksadmginvbt](https://community.thunkable.com/u/jksadmginvbt)\
**Post date:** [September 25, 2023, 4:32pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/8 "2023-09-25T16:32:24Z")

</div>

Perfectly! Now, it showed up!, but is there anyway to make layout width and height 100% as well? Because I’m worried to set in px and get problems with layout size on smartphone or tablets bigger than what I configured.

 ![Screenshot_9](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/b/1b0da7ec89983adc53ab63e6b012537c1fd8fc50.png)

---

<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:** [September 25, 2023, 4:55pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/9 "2023-09-25T16:55:59Z")

</div>

The Layout component itself will have to be set in pixels. I can say from experience using it on a larger device (iPhone 12 Pro Max) that it generally creates a nice UI across all devices.

As @domhnallohanlon mentioned above, if you’re working on queries for larger devices (i.e. tablets), using the blocks to help you dynamically change the scale is a great solution.

It’s a bit dated but there are some good examples of doing that there in this thread:

> [@iPad/Tablet version, landscape modality... is possible?](https://community.thunkable.com/t/ipad-tablet-version-landscape-modality-is-possible/1276881/6):
>
> If you just want to change size based on screen dimensions, you can do that with blocks. In the device drawer, see ‘screen width’ and ‘screen height’. Some basic logic and math lets you implement the bootstrap container behavior you described. Here’s some code I used to deal with different screen widths/heights/proportions.

I’ll also use this as a moment to get on my soapbox and advocate for mobile first design approach, designing for your normal “mobile” screen size first and then using the blocks to create media queries for larger devices.

> **[What is Mobile First Design? Why It’s Important & How To Make It?](https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00)**
>
> On the Mobile World Congress in 2010, Eric Schmidt, the CEO of Google put forward that designers should follow the “mobile first” rule in…

---

<div class="post-metadata">

**Author:** ![jksadmginvbt](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jksadmginvbt/32/100484_2.png) [@jksadmginvbt](https://community.thunkable.com/u/jksadmginvbt)\
**Post date:** [September 25, 2023, 5:12pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/10 "2023-09-25T17:12:52Z")

</div>

Thank you so much. Perfect solution! I just implemented over here and it’s working fine.

 ![Screenshot_10](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/7/b7a61feb87ab2db49c48812f83c1324438710d9d.png)

---

<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:** [September 25, 2023, 7:07pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/11 "2023-09-25T19:07:58Z")

</div>

Id love to see an option for max/min sizes at some time. Would allow for more flexibility in displays

---

<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:** [December 24, 2023, 7:08pm UTC](https://community.thunkable.com/t/solved-where-is-the-option-fill-container/2611249/12 "2023-12-24T19:08:01Z")

</div>

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