Grouping Components

Grouping Components works a bit differently in Responsive Builder than it does in Legacy Builder.

Skill Level: Intermediate

Before You Begin

• Make sure you understand the definitions and terms.

• Make sure you have read through the previous guides, especially how to access the Layout tab and the Shared Layout Settings and Custom Layout Settings.

• Make sure you understand the Component Tree and Parent and Child Components.

Video

Walkthrough

There are a few principles to understand when using rectangles, images, & ellipses:

1. When you place a rectangle, image, or ellipses on a screen, it acts as a sort of container for other things. You can drag and drop other components into it to create an Auto-Group.

2. You can access the components inside the "container" by double-clicking on the component you want to select. Note that you can also have nested rectangles, i.e. rectangles inside of rectangles.

3. Components within a rectangle will scale with the rectangle automatically, unless the component scaling is set to Stays Fixed.

4. The yellow bounding box of a rectangle extends only to the edges of the rectangle.

5. In order for a component to be considered "inside" the rectangle, the component's yellow borders must be fully inside the rectangle's borders.

6. Rectangles do not appear in the component tree as a group, but can be opened up like a group can within the component tree to add or remove components.

7. Because rectangles are not technically considered groups, the components inside them do not have the option to Scale with Group, however Scales with Parent does ensure that the components scale as their parent rectangle scales.

NOTE: You cannot ungroup rectangles. If you need to remove components from a rectangle, you can click on the Component and drag it out of the Auto-Group.

Groups

There are a few principles to understand when using rectangles:

1. You can turn anything into a group, even a single component, another group, or a rectangle with components inside it.

2. The green bounding box of a group extends out to include any component within that group, regardless of their location on screen. Group bounding boxes can be quite large if components within the group are positioned far apart.

3. When a component is added to a group, the group's green border extends to include the newly added component.

4. You can Add or Remove a component to a Group by dragging it into or out of the green bounding box.

5. Groups are useful for applying layout constraints to several components or groups that need to maintain not just their own scaling, anchoring, and positioning, but also the components' settings relative to one another. Notice in the animation below, that the pricing cards tend to get closer and farther apart as the screen scales. When the pricing card rectangles are placed into a group, however, the spacing between them stays the same as the screen scales.

Click the animation to enlarge it.

When Should I Use Groups vs. Rectangles?

This is an excellent question, however it's not really an either/or answer because both groups and rectangles serve a similar purpose. The main reason to pick rectangles over groups would be to add styling to the background such as Background Color or Border.

Learn More

• Be sure to check out the Design section to learn more about designing screens in Adalo.

Help

If you need additional help with this article, you can always ask in our community forum or hire an Expert to help! 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!