apps
2023.10
false
UiPath logo, featuring letters U and I in white
LEGACY
Legacy Apps User Guide for Automation Suite
Automation CloudAutomation Cloud Public SectorAutomation Suite
Last updated Nov 11, 2024

Differences Between Container Controls

Containers are the building blocks for your app's layout and it is important to understand the various types of container controls and when to use them.



Container

Container Layout

Page Container

A single container which can hold controls and other containers within it

Container Layout helps you to build a complex layout with various sections ( containers).

Page container can hosts another page in the current page

Grows based on the size of its contents

Has a fixed height. Width is grid based and will shrink and grow based on screen width

Grows based on the size of the nested page

  • Used to align a group of elements similarly
  • Used to align a specific element different from that of other elements
  • Nested containers are possible
  • Nested containers are used if you want to align/position elements in the inner container differently from the outer one
  • No limit of the number of nested containers. However, generally advised not to exceed 4 levels of nested containers for maintainability and performance
  • Used to create a layout (structure) for a page
  • Not recommend to use within other containers/control other than page
  • Using nested container layouts will lead to extra spaces and maintainability issues
  • Useful for reusing components in your app, eg: when you want to have a consistent header or consistent body across different pages of your app
  • Helps in maintainability

Example on How to Align Controls Using Containers

The below example shows a simple 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 wanted the First Name and Last Name available side by side. This can be accomplished by the following steps

  • Add a new container
  • Change the layout of the container to Horizontal
  • Add the two text boxes within the container
docs image
  • Example on How to Align Controls Using Containers

Was this page helpful?

Get The Help You Need
Learning RPA - Automation Courses
UiPath Community Forum
Uipath Logo White
Trust and Security
© 2005-2024 UiPath. All rights reserved.