Container Controls - PowerApps

PowerApps provides pre-built reusable component library for the user to spin up a wire frame into a Web app quickly. The coverage of the UI element is impressive as it has range from buttons to input text.

With more UI elements on a screen any change to the layout would mean you would have to rearrange the components individually. It becomes painful when the screen form factor doesn't account the elements.

Why responsive UI is need ?
The experience of running a PowerApp across Desktop, Mobile and Tablet should be seamless as App can respond to different devices or screen sizes.
What responsive design enables is

• Hide/Show controls
• Move the positions of controls
• Resize controls
• Prioritize controls
• Replacement of controls
• Minimum size required

Rusty Controls:
The painful way to keep the UI elements aligned and responsive in a very crude manner is to refer the Label X,Y properties in reference to another element in the screen.

the below example I have to set the location of Label 2 X - parameter as a Label reference in the same UI screen.

Better Hack combined control:
When multiple controls are selected you can create group control either by right click Group option or Ctrl+G keyboard. Groups leave the controls inside a group use positioning relative to the screen, which means you need not do X,Y positioning reference for all the elements in a UI screen. Much more easier.

The enhanced Group control has its own Color, Border, and Visible properties which are independent of the child controls. However since setting the enhanced Group to Visible No will hide all child control, it behaves the same as the classic group Visible property.

Containers:
Containers make it easier to UI of the App very responsive. Group when applied to a set of controls don’t affect the layout of the screen. Meaning, they don’t add any element to the DOM (Document Object Model) where as containers does,

• Vertical Container: stacks controls up-and-down
  

• Horizontal Container: positions controls side-by-side from left-to-right
  

• Container: allows controls to be positioned on top of one another.
  

PowerApps container control Properties

BorderColor	The color of a control’s border.
BorderStyle	this property is to specify whether a control’s border is Solid, Dashed, Dotted, or None.
BorderThickness	specify the thickness of a control’s border.
Fill	The background color of a control.
Height	is the distance between the top and bottom edges of a control.
Width	The distance between the left and right edges of a control.
Visible	this property is to specify whether a control appears or is hidden.
X	The distance between a control’s left edge and the left edge of its parent container.
Y	The distance between a control’s top edge and the top edge of the parent container).

Also there are properties for the Horizontal and Vertical controls

Direction	It defines the orientation of the container’s child components ” the items inside the container” either Horizontal or Vertical.
Justify	It defines how child elements are aligned with the primary axis and it will help you to set the position of controls inside your container along the primary axis ( Start, End, Center, Space Between)
Align	Defines how child components are positioned in the container, in the off axis (opposite from LayoutDirection). Start, Center, End, Stretch
Gap	It provides the space “distance ” between containers controls in pixels.
Horizontal and Vertical Overflow	It controls whether the container displays scrollbars or removes content when it becomes too large to fit. So the two properties will define what happens when the contents of the container exceed the size of the container itself.
Wrap	It defines whether the content wraps to a new row or column when it cannot fit “when the container is smaller than its contents”.

Controls can be added into a container by cutting and pasting them into a container. In group, you can’t add a new control directly.

Documentation:
https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/control-container