Designing agile, responsive applications and dashboards requires that you create optimal user experiences across all devices and platforms. Atrius Solution Builder allows you to control item placement in response to browser and screen size so the applications adapt to multiple devices – desktops, laptops, tablets, and smartphones. If you want to learn more about the principles of Solution Builder layout, see an online reference to flexbox, here.
To learn about grouping and formatting components and their layouts, click here.
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 properties 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.