Create Component Containers

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:

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.

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.