Aligning and Arranging Objects in a Responsive User Interface

A container groups together controls and indicators and determines their arrangement on the panel. If the screen size on which you view your application changes, the objects in a container rearrange according to the layout settings of the container. Containers exist only on panels whose layout type is flexible.

Select a container and configure the layout options in the Layout section of the Item tab to determine how objects in the container arrange and align when the screen size changes.

1. Set the Direction to one of the following options:

   Option	Description
   Row	Arranges objects in a single row as the screen width allows. As the screen width decreases, objects rearrange into multiple rows.
   Column	Arranges objects in a single column.

2. Set the Horizontal alignment to one of the following options:

   Option	Description
   Left	Aligns objects to the left of the container.
   Center	Aligns objects to the center of the container.
   Right	Aligns objects to the right of the container.
   Space between	Arranges objects with space between the left and right of objects.
   Space around	Arranges objects with space before, between, and after objects.

3. Set the Vertical alignment to one of the following options:

   Option	Description
   Top	Aligns objects to the top of the container.
   Center	Aligns objects to the center of the container.
   Bottom	Aligns objects to the bottom of the container.
   Space between	Arranges objects with space between the top and bottom of objects.
   Space around	Arranges objects with space above, between, and, below objects.

Select an object and configure the layout options in the Layout section of the Item tab to set the object size and whether the object resizes when the screen size changes.

4. Set the Width and Height of the object.
5. Set Flexible resize to one of the following options:

   Option	Description
   Do not resize	Does not resize the object.
   Resize height and width	Resizes the height and width of the object while maintaining aspect ratio.
   Resize width	Resizes only the width of the object.

   

   Note  

   The flexible resize options are not available for all objects, as some objects have fixed width and/or height. For example, text objects do not support flexible resize options. You must enable the Auto size property for text objects to resize to the container or disable the Auto size property to prevent text objects from resizing.

6. Optional: Set Minimum height and Minimum width of the objects. This prevents the objects from becoming too small to read or use when the screen size decreases.
7. Click File»Save all to save all files.
8. Select Run»Run in browser to view your application in a web browser. Resize the web browser and ensure the controls and indicators resize appropriately.