Layout Group Component

 

This component groups a set of other components, just like the basic Group component. A Layout Group, however, is able to resize itself to accommodate the different sizes of a component’s content, particularly when controlled by a dashboard feed list; for example, text from a blog post.

Using the Layout Group Component

Images, text and HTML articles are the main components which vary in size and benefit from being in a Layout Group.

Set the Resize to content property on each of the components which can vary in size. This will cause them to expand to fit their contents, push down the components underneath to make space, and ultimately increase the size of the layout group.

Note: If a text or image is empty (for example, an image filename coming from a feed list is blank) then this will cause the component to shrink down to nothing.

If you don’t want a component to move when components above it increase in size, then set the Position and Size: Normal layout option on the component. This property is only available when the component is inside a layout group.

Properties for Layout Group Component

Name When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and Size Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create a group that will be well positioned across devices.
Clipping Type Dropdown – options None, Rectangle, Circle. Whichever option is selected will clip whatever is added to the group to the bounds of that shape within the Layout Group Component’s framework.
Opacity Set how opaque the layout group will display on a scale of 0 to 100, with 0 being totally transparent.
Resize Rule Controls how the layout group sizes itself.

  • No resize: The layout group will not change in size. This makes it work the same as the original Group component.
  • Full resize: The layout group will size itself larger OR smaller to exactly fit the components you’ve placed inside it.
  • Shrink only: The layout group will get smaller if the components inside it don’t need the original size. But it will not enlarge if they are bigger.
  • Grow only: The layout group will enlarge if the components inside it are bigger than it’s initial size, but it won’t ever get smaller.