Differences Between Container Controls

Learn the main differences between the container types:

Container	Container Layout	Page Container
A single container which can hold controls and other containers within it.	A container layout that groups several simple containers, and helps build a complex app layout.	Page containers host another page in the current page.
Grows based on the size of its contents.	Has a fixed height, while its width depends on the screen width.	Grows based on the size of the hosted page.
Aligns a group of elements similarly. Aligns a specific element different from that of other elements. You can nest containers: To align/position elements in the inner container differently to the outer one. We recommend nesting maximum 4 containers for performance reasons, however no limit is imposed.	Creates the page structure. We recommend using it only in page containers. Nesting Container Layouts leads to extra spaces and maintenance issues.	Useful for reusing components in your app, for example having a the same header or body across different pages of your app Helps app maintenance

Example on How to Align Controls Using Containers

Assume your app contains a form, where you want to collect the following information from the user: First Name, Last Name, Email & School. While Email & School input boxes can be one below the other, we want the First Name and Last Name available side by side.

This can be accomplished by the following steps:

1. Add a new Container.
2. Change the layout of the Container to Horizontal.
3. Add the two Textboxes within the container.