Container
This article describes the Container component, its purpose and properties.
Last updated
Was this helpful?
Learn Section
This article describes the Container component, its purpose and properties.
Last updated
Was this helpful?
The purpose of the Container is to group several objects into one object. This may seem to have a similar purpose to the group option (select multiple objects, and then either CTRL+G or ARRANGE > Group), but the Container component is more versatile and can act as a 'mini-canvas'.
This guide will not describe the dynamic visibility properties of the container as these are generic to each component, a separate guide and tutorial on dynamic visibility can be found .
Select Container from the Containers category of the component library. Move the mouse cursor over the canvas to add a web view component to your project:
A container is represented on the canvas by a dashed rectangle:
Click on the object that you want to add to the Container and drag the mouse cursor until it is positioned over the container object, when a blue bounding box appears around the container object, release the mouse button and the object will be added to the container object:
When dragging an object into a Container that already contains other objects, the blue bounding box will appear around the container object, but a black line also appears below or above the objects already in the container. This indicates where the object will be placed in the layer stack of the container object:
To add an object to a Container on the canvas, select the object with the mouse, hold down the CTRL button (CTRL+⌘ Mac), and move the object until it is positioned over the container, the container outline will change to a solid blue border, release the mouse button and CTRL button:
Simply click on the Container or its contents to select either.
Single-click the Container to select it:
Double-click anywhere on the Container; the handles of the selection disappear from the container and a name tab appears at the top. Now single-click any of the objects inside of the container to select.
Double-click outside of the Container (or on an empty area of the container) to deselect items inside of the container or the container itself.
Set a container’s position, either in the properties panel or select it on the canvas, and adjust its size by grabbing and moving the selection handles.
The container’s size can also be set by binding it to position values contained in the spreadsheet.
Set a container’s position either in the properties panel or by selecting the container and dragging it with the mouse. It can also be repositioned by binding to position values contained in the spreadsheet.
Objects inside the container will move with the container.
When adding an object to a container by dragging and dropping it inside the object browser, the object will be placed into the container at the same position as it was on the canvas i.e. if it was at X position: 10, Y position: 10, it will be container X position 10 and container Y position 10.
When dragging objects into the container on the canvas, the objects will be placed at the position where the mouse button is released.
Click and drag the object, either up above the Container, or below the last item in the container until the black line indicates that the object is outside of the container.
Double-click on any part of the Container. A name label will show above the container and its border will become a solid blue line. Click the object inside the container and hold down the CTRL button (CTRL+⌘ Mac) while dragging the object outside of the container bounds. Release the CTRL button (CTRL+⌘ Mac) and mouse buttons.
Click to select either the container or the object and press the delete key.
To delete a Container, single click to select the container. Press delete.
Deleting a Container will delete all of its contents
To delete an object inside a Container, first double-click the container then single-click the object. Press delete.
