ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Layout control
  • Layout control overview
  • Creating a Layout control
  • Creating the control
  • Creating a Layout control by refactoring
  • Layout control in a Looper control
  • Characteristics of Layout controls
  • General tab
  • Details tab
  • Example of different types of overflow
  • Layout control and Responsive mode (zoning and layouts)
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Layout control overview
The Layout control simplifies the implementation of dynamic UIs where controls are displayed and/or hidden programmatically. When a control is hidden (e.g. via the Visible property), the Layout control automatically repositions all the other controls to keep a neat interface and avoid "spaces".
Layout controls are available in vertical and horizontal mode.
The Layout control is composed of cells. These cells contain the controls found in the Layout control. Each cell can contain any type of control, including another Layout control. The controls can be shown or hidden.
The cells can be created via the "General" tab in the description window or in the context menu of the Layout control.
Creating a Layout control

Creating the control

To create a Layout control:
  1. On the "Creation" tab, in the "Containers" group, expand "Layout" and choose the orientation: horizontal or vertical.
  2. Click where the control will be created in the window or page. The control appears in the editor.
    Remark: The dimensions of the control are optimized to take up the available space at the specified position. 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:
To view the characteristics of the control, select "Description" in the context menu.
To handle the Layout control, see Manipulating Layout controls programmatically.

Creating a Layout control by refactoring

A Layout control can also be created using existing controls:
  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

WEBDEV - Server codeWEBDEV - Browser code 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.
Characteristics of Layout controls
The characteristics of the Layout control can be found in the "General" and "Details" tabs of the control description window.

General tab

The "General" tab allows you to manage the different cells in the Layout control. You can:
  • add, duplicate or delete cells.
  • modify the order of the cells using the arrows.
  • modify the parameters of the current cell. You can:
    • 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 "In case of overflow: Enlarge control and push surrounding controls" has not been selected ("Details" tab in the control description window).
WEBDEV - Server codePHP The CSS style of the current cell can also be configured in the "General" tab.

Details tab

The layout parameters of the control can be defined in the "Details" tab. The available options are:
  • Layout: Used to specify whether the Layout control manages the layout of controls vertically or horizontally.
    • Horizontal: Cells are displayed on a single row and span the entire height of the control. Only the width can be modified.
    • Vertical: Cells are displayed on a single column and span the entire width of the control. Only the height can be modified.
  • Fix cells: Used to specify the alignment of cells in the control according to the selected 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 control and push surrounding controls: the control is enlarged in order 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 control is enlarged, and scrollbars are displayed in order to scroll in the control.
    • Truncate the content: No adaptation is applied, cells are truncated.
  • Margin between cells: Specing between cells in the Layout control. This spacing is expressed in pixels. It can be changed programmatically with the MarginInterCell property.

Example of different types of overflow

Example: A Layout control is created in the window editor.
Layout control: Example of different types of overflow
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.
Example 1: Enlarge control and push surrounding controls
  • During a test (Go), the window displays all controls.
    Enlarge control and push surrounding 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.
    Enlarge control and push surrounding controls
Example 2: Display a scrollbar automatically
  • 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.
    Display a scrollbar automatically
Example 3: Truncate the content
  • During a test (Go), the window displays all controls.
  • When a comment is added, the content that overflows the Layout control is not displayed.
WEBDEV - Server code
Layout control and Responsive mode (zoning and layouts)
The Layout control is available in Responsive mode (zoning and layouts). The following options can be set by slice:
  • the standard height, as well as the minimum and maximum height of the cells,
  • the orientation of the Layout control (horizontal or vertical).
You can hide cells when the slice is changed by using the "Whenever changing layout" event associated with the page.
Related Examples:
The Layout control Unit examples (WINDEV): The Layout control
[ + ] Using the Layout control
The Layout Control Unit examples (WEBDEV): The Layout Control
[ + ] Using the Layout control
The Layout control Unit examples (WINDEV Mobile): The Layout control
[ + ] Using a Layout control
Minimum version required
  • Version 23
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 07/08/2024

Send a report | Local help