ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Managing alignments
  • Overview
  • How to?
  • Aligning several controls in a window, in a page or in a report
  • The different options in details
  • Position
  • Inside/Outside
  • Size
  • Centering and distribution
  • Other alignments
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
Overview
To optimize the alignment of controls in a window, page or report, you have the ability to use the alignment options. These options are used to align several controls in the window or report.
You have the ability to align the controls via the "Alignment" pane of the editor ribbon.
The options are grouped according to several themes:
  • Position:
    Position management
  • Inside and outside alignment:
    Alignment management
  • Size:
    Set size
  • Centering and distribution:
    Centering and distribution
  • Other:
    Other
How to?

Aligning several controls in a window, in a page or in a report

To align several controls in a window, in a page or in a report:
  1. Select the controls to align.
  2. Perform:
    • A preset alignment: on the "Alignment" tab, select the desired alignment characteristics in the "Position", "Inside and outside", "Size" and "Centering a distribution" groups.
    • A custom alignment: on the "Alignment" tab, in the "Other alignments" group, click "Custom alignment". The custom alignment allows you to use specific alignment properties. This mode is only available for controls in a window or page.
Remark: Viewing the alignment before application
If several controls are selected, hovering an alignment icon is used to view in real time the result of a click performed on the icon. This allows you to see the effect of the different options available.
A click on the icon applies the selected alignment.
The window, the page or the report remains in its initial status when the hovering is over.
The different options in details

Position

The options in the "Position" group allow you to manage the positions of controls, relative to each other.
The "Swap positions" option swaps 2 controls, or moves 3 or more controls in a cycle.
  • Example 1: Swapping two controls: All you have to do is select 2 controls: their positions are swapped.
  • Example 2: Swap positions in a cycle: To position the "SMTP server" control after the "Email address" control, all you have to do is select the "SMTP server" control first then "Password" and "Confirm password".
The alignment options of positions are used to align several controls (the control used as reference for the alignment being the first selected control). You can:
  • align the controls according to the left or right outside border.
  • align the controls according to the top or bottom border.
  • align the centers of controls horizontally or vertically.
Positioning options in relation to the window are used to quickly position a control or a group of controls. You can:
  • Position the controls as much as possible on the left then at the top: The controls are moved as much as possible to the left (in relation to the existing controls) then they are moved as much as possible to the top (in relation to the existing controls).
  • Position the controls as much as possible on the left: The controls are moved as much as possible to the left (in relation to the existing controls).
  • Position the controls as much as possible at the top: The controls are moved as much as possible to the top (in relation to the existing controls).
Similarly, you have the ability to:
  • Position the controls as much as possible at the bottom.
  • Position the controls as much as possible on the right.
  • Position the controls as much as possible on the right then at the bottom.
Remarks:
  • During the positioning, the anchors are taken into account.
  • If the control is in a Parent control (supercontrol for example), the positioning is defined in relation to the parent.

Inside/Outside

The options in the "Inside and outside" group allow you to manage the inside and outside borders of controls. These options are very useful to perform an alignment of controls with captions: edit controls, combo boxes, ...

Size

The options in the "Size" group allow you to:
  • standardize the size of controls (the reference size is the one of the first selected control): same width, same height.
  • extend the controls in the window according to the existing controls. The options "Extend in width", "Extend in height" and "Extend in width and height" calculate the maximum size that can be occupied by the control in the interface in relation to the other controls. The resize operation is immediately performed.
    For example, a Map control positioned in a window can fill the entire available space, taking into account the controls already found in the window.
    Remarks:
    • the anchors are taken into account.
    • the size of the parent control is taken into account.

Centering and distribution

The options in the "Centering and distribution" group allow you to:
  • center the selected element in the parent (horizontally and vertically).
  • define the vertical and horizontal spacing between controls.

Other alignments

The different options are:
Custom alignment
In the custom alignment, you can define:
  • The horizontal or vertical alignment: the controls can be aligned to the left or to the right according to the beginning of the control or according to the beginning of the input area. They can also be aligned by the center.
  • The regular spacing: the spacing between controls is adapted in order to be the same between each control (horizontally or vertically).
  • The size: the size of the selected controls automatically adapts to obtain controls with the same height and/or width.
  • The reference control: to align and define the size of the controls, the reference control can be:
    • the first selected control (the one with the white handles),
    • the last selected control,
    • the largest selected control,
    • the most top left selected control.
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 04/03/2023

Send a report | Local help