UiPath Documentation
studio-web
latest
false
Studio Web user guide

Differences Between Container Controls

Compare container control types in Studio Web apps and select the appropriate one based on layout and content arrangement requirements.

Learn the main differences between the container types:

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.
  • Example on How to Align Controls Using Containers​

Was this page helpful?

Connect

Need help? Support

Want to learn? UiPath Academy

Have questions? UiPath Forum

Stay updated