Group

A group is a container that holds other components and controls their layout. Groups are essential for creating responsive layouts and for creating widgets composed of multiple components, such as gauges, heat maps, buttons, pop-ups, and callouts. Groups enable you to create symbols and to use repeaters to render iterative data.

There are two ways to create a group:

Select multiple components and group them. The resulting group has Absolute layout and Fit Ratio scaling set by default, which means that components in the group resize with the group while maintaining their aspect ratio. When you ungroup such a group, its components are transferred to the group's parent container
Create an empty group and populate it. The resulting group has Absolute layout and no scaling set by default, which means that components in the group do not resize with the group.

To automatically adjust the size of a vertical or horizontal group to fit its contents, set the group's Width and Height properties to Auto, as follows:

Select the group.
In the Property Inspector, expand the Position and Size section.
To set Width to Auto, hover over the Width property until a blue dot appears, then click the blue dot and select Reset
Repeat the preceding step for the Height property.

Configuring Responsive Layouts

To control how your applications are displayed on different devices and when users resize windows, use the following options to create responsive layouts.

Positioning Components

To configure how components are positioned in a group, set its Layout property. Options for positioning are as follows:

Absolute: Components remain where you place them and do not change size or move when the group is resized (unless you enable scaling). By default, the contents of a group are clipped if the group's size is reduced below the area required to display the contents. To disable clipping, set the group's Clip Content property to false.
Horizontal: Components are displayed in rows.
Vertical: Components are displayed in columns.

Wrapping options: By default, components do not wrap. When wrapping is disabled, components do not move if the width of a horizontal group is set below the width of a row, and likewise, components in vertical groups do not wrap if the height of the group is set below the height required to display a column. To enable wrapping, set the group's Wrap property.

Alignment options: To distribute the components in a group, set the corresponding alignment property: for a vertical layout, set Vert(ical) Layout and, for a horizontal layout, set Horiz(ontal) Alignment. Options are as follows:

Center: Components are packed together around the horizontal or vertical center.
Space-Between: Components are spaced equally according to the layout of the group.
Space-Around: Components are distributed with equal space between them. The space at the ends of the container equals half of the space between two adjacent items.
Baseline: The baseline of components is aligned to the baseline of the group.

Sizing Components

You can configure the contents of a group to resize according to the size of the group, as shown in the following video clip.

To achieve this effect, set the group's Layout to Absolute and set Scaling to Fit Ratio or Fit. Fit Ratio maintains the aspect ratio of children, and Fit does not. Set the height and Width property of each component in the group to Auto.

Another approach is to set the Width or Height property of the components to a percentage value. For example, if you set the width of a component to 50%, it will always be half the width of the group.

Stretching: To configure components to stretch to fit the parent container in the direction opposite to the layout enable stretching and set the components' corresponding width or height property to auto. For example, if you have a horizontal group containing buttons and you want the buttons to always be as tall as the containing group, set the group's Vert Alignment property to Stretch and set the Height property of all buttons to auto.

Proportional sizing (flex-grow and flex-shrink): To configure components to automatically resize in proportion to the other components contained by the group, set the Flexsize properties. For example, if a group contains two components and you want one to grow and shrink twice as much as the other, set the Flexsize properties of the smaller component to 1 and set the larger component to 2.