Create Component Containers
You can create hidden containers for your components to keep them from moving around or expanding into areas they should not.
Skill Level: Intermediate
Before You Begin
Know about Screens and Components
Know about how to arrange and group components together
You do not need a paid Adalo plan to use this feature.
Walkthrough
How Adalo Renders Screens
In order to understand what containers are and why they may sometimes be necessary, it helps to have a good understanding of how Adalo renders the screens in your app.
In the background, Adalo uses a method called Flexbox that tries to automatically organize the components on your screens into invisible containers while also making these containers responsive to different screen sizes. If you want to dig into the weeds about how Flexbox works, you can do that here.
When working with individual components and even groups of components, sometimes the auto-generated containers from Adalo have difficulty understanding what you want your app to look like. If you have a complicated screen layout, components can do weird things if the screen size changes or users have larger phone text for example. To help reduce these weird behaviors, we can help guide Adalo a bit by creating containers ourselves using the rectangle component.
Creating Containers
While in most cases containers will not be necessary, creating containers for your components is one of the best methods you can use to make sure your app looks and functions the way you want. Not to mention, laying out screens using containers is a staple in any type of web design. To create containers:
2.) In the Simple section dropdown, click and drag the Rectangle component onto a screen and resize it to fit your liking.
3.) In the same way, add some text over the top of the new rectangle, ensuring that the text's yellow border is fully inside the rectangle. This will ensure your rectangle acts as a container for the text. Borders that touch (like in the image below) are fine as long as they don't exceed the rectangle border.
4.) If you like, you can group these together to make the container easier to manage, but grouping is not required to maintain the function of the container.
5.) You can do this with all of your other components as well. You can build whole layouts within containers or even place containers within containers. Here are a few tips for working with them:
Dynamic length items within containers (such as multi-line text) will automatically expand the container downward to accommodate the containers contents.
You can make the containers grey at first so they are easy to see and manipulate, then change the color to your background color or transparent to hide them.
Containers are quite useful when creating component states, since they adjust their size based on what is visible inside the container.
If you choose to group your container and components, you can also add click actions to the entire group, allowing you to create your own buttons, navigation bars, and menus.
Example
Want to see the app we used to make this walkthrough? Click Here to use or clone the example app. If you don't know how to clone apps, you can learn to do that here.
Learn More
Containers are typically not necessary, but if you experience unexpected behaviors in your app layout, they are a great way to make those components behave.
Thinking of your app layout in terms of sections of content can really help in the design of your app as well. Even if you don't need to use containers, thinking in this way can provide some good cohesion to your app layouts.
You don't always have to hide your containers. Many apps have tiles or banners that they use to contain content in a very stylish, yet functional way.
You can also use containers as spacers between other containers to keep everything nice and neat - like a puzzle that fits together just right!
Help
If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!
Do you have a tutorial or help doc request? Let us know!
Last updated
