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.

Before you begin, create a WebVI 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:
    OptionDescription
    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:
    OptionDescription
    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:
    OptionDescription
    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.
  1. Set the Width and Height of the object.
  2. Set Flexible resize to one of the following options:
    OptionDescription
    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.
  3. 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.
  4. Click File » Save all to save all files.
  5. 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.