[Solved] Where is the option fill container?

[jksadmginvbt]

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

[jared]

Waiting on this feature too

[domhnallohanlon]

Hey @jksadmginvbt - welcome to the Community

Two options to do this;

The first (and my preferred) option is to use the Layout component

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.

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

[jksadmginvbt]

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

[domhnallohanlon]

@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

[jksadmginvbt]

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.

[matt_conroy]

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

[jksadmginvbt]

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.

[matt_conroy]

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?

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. [image]

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?

[jksadmginvbt]

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

[jared]

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