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
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.
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:
1.) Click on the big plus sign
in the top left corner of the builder.
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.
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 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!