Creating the control

1. In the "Creation" pane, in the "Containers" group, pull down "Layout" and select orientation: horizontal or vertical..
2. Click where the control will be created in the window or page. The control appears in the editor.
   Note: The dimensions of the field created are optimized to occupy the space available at the position indicated.. If necessary, resize the control using the handles.
3. Add cells in the Layout control. These cells can be added:
   • via the context menu of the control ("Insert a cell").
   • via the "General" tab of the control description ("Add" button).
4. Add controls in the cells of the Layout control.
5. Set the anchors of the controls in the Layout control, and specify how they adapt to content. For more details, see:
   • Anchoring applied to window controls.
   • Anchoring in a page.

Creating a Layout control by refactoring

1. Select the controls that will be included in the Layout control.
2. On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Create a layout from the selection".
3. A Layout control is automatically created and a cell is created for each control on a different row.

Layout control in a Looper control

In a window, a Layout control can be used in a Looper control:

• Create a Looper control.
• In the control description window, go to the "Content" tab and check "Use an internal window per row (LooperAddIW function)".
• Create an internal window. This internal window will contain the Layout control with the necessary controls.

For more details, see Display different content for each row.

In a page, the Layout control can be used in a control inside a Looper control. For example, if you want to create a Looper control to optimize an interface:

• Create a Looper control of type AJAX, populated programmatically.
• Set the maximum number of visible rows in the "General" tab of the description window. For this example, select "No limit - No scrollbar".
• Create a Layout control with the necessary controls and place it in a row of the Looper control.

General tab

• add, duplicate or delete cells.
• modify the order of the cells using the arrows.
• modify the parameters of the current cell. It is possible to:
  • Make the cell visible or not (initial state).
  • Define the height and the maximum height of the cell:
    • The height corresponds to the minimum size of the cell.
    • The maximum height of the cell cannot be exceeded if it is specified.
  • Occupy the entire available space. This option is available if the "In case of overflow: Enlarge field, expand surrounding fields" has not been selected ("Detail" tab of the control description window)..

The CSS style of the current cell can also be configured in the "General" tab.

Details tab

• Disposition: Allows you to specify whether the Layout control manages the layout of fields vertically or horizontally..
  • Horizontal: cells are displayed on a single line, occupying the entire height of the field.. Only the width can be modified.
  • Vertical: Cells are displayed in a single column, occupying the entire width of the field.. Only the height can be modified.
• Fix cells: Used to specify the alignment of cells in the field according to the chosen layout..
  • In a vertical layout, cells can be aligned to the top or to the bottom.
  • In a horizontal layout, cells can be aligned to the left or to the right.
• Management of overflow:
  • Enlarge field, push fields around: field is enlarged to display all cells.
    • If there are other controls below or to the right, they are "pushed".
    • If one or more cells are reduced, the Layout control is resized without shrinking beyond its initial size.
    • The controls below or to the right are moved according to the new size.
    • The window is never reduced.
  • Display a scrollbar automatically: the client area of the field is enlarged and scrollbars are displayed to allow scrolling within the field..
  • Truncate content: No adaptation, cell display is truncated.
  • The "Reduce the parent" option allows you to reduce the parent if necessary. If the window is the parent, it will be reduced next time it is opened.
    Remark: When this option is enabled, cells or cell fields must be hidden either in the "Global declarations" window event, or in the "Initialization" field event..
• Margin between cells: Spacing between Layout control cells. This spacing is expressed in pixels. It can be changed programmatically with the MarginInterCell property.

Remarks:

• Please note: a Layout control cannot be enlarged if the window is maximized without a scrollbar (because the window cannot be enlarged as well).
• To reduce a window after it has been opened (e.g., after hiding the controls), use LayoutAdaptSize.
• Special case: RTF Label field: Under Windows 7 (and earlier), the width of an RTF label cannot be calculated.. Therefore, the width of the control cannot be adapted.

Example of different types of overflow

Example: A Layout control is created in the window editor.

This Layout control contains:

• Several cells used to display the different form controls.
• A horizontal Layout control containing 2 buttons, displayed (or not) according to the presence of phone number and/or email address.

• During a test (Go), the window displays all controls.
  
• When the phone number and email address are deleted, the Layout control is reduced but the window stays the same size.
• When the phone number, email address and comment are added, the Layout control is enlarged, as well as the window.
  

• During a test (Go), the window displays all controls.
• When a comment is added, a scrollbar automatically appears in the Layout control in order to scroll through the different elements.
  

• During a test (Go), the window displays all controls.
• When a comment is added, the content that overflows the Layout control is not displayed.

Example 4: option Enlarge the field Push the fields around with programmable window reduction management

• During a test (Go), the window displays all controls.
  
• When the phone number and email address are deleted, the Layout controls is reduced, as well as the window.
  
  When the Email and Phone controls are deleted, LayoutAdaptSize resizes the Layout control to avoid having an empty area. It also resizes the window, allowing it to return to its initial size.
• When the phone number, email address and comment are added, the Layout control is enlarged, as well as the window.
  

Caution: This feature should be used with care: depending on the content of the window (outside the Layout control), unexpected effects may occur (window shrinkage when fields are to be displayed on a different plane, etc.)..