PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • How to implement the management of anchors?
  • Viewing the anchors: red arrows or blue arrows
  • Special case for the loopers: Anchoring in relation to the content and maximum number of rows per page
  • Special case: Anchoring in relation to the content
  • Special case: Anchoring the controls of a container
  • Some examples
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
In a page, the anchors define how the content of a page will behave when the page is enlarged by the Web user.
For example, a control can be anchored:
  • in position, and therefore moved when the browser is resized.
  • in size, and therefore be enlarged in width or in height when the browser is resized.
Up to version 16, the management of anchors in WEBDEV was performed by the positioning tables.
From version 17, the management of anchors is simplified via the use of the generation in zoning mode.
How to implement the management of anchors?
To define the anchor of an element:
  1. Select the requested element (control, layout area, cell, ...).
  2. Define the anchor of the element:
    • in the "GUI" tab of the description window of the element.
    • via "Anchor" from the popup menu of relevant element.
If the "Anchor" option is grayed, it means that the generation mode of the page does not allow you to manage the anchors. To modify the generation mode of the page:
  • Select "Page .. Description".
  • In the "General" tab, select "Edit in "zoning", positioning by blocks and anchoring on controls".
  • Validate.
  • On the "Page" pane, in the "Page" group, click "Description".
  • In the "General" tab, select "Edit in "zoning", positioning by blocks and anchoring on controls".
  • Validate.
The control cannot be anchored if it is stackable. However, when the "Anchor" option is selected, WEBDEV automatically proposes to make the control non stackable so that it can be anchored.
If the control overflow is invisible, the anchoring may not be visible in the browser. In this case:
  • Display the "Style" tab of the control description.
  • Select the "Overflow" element.
  • Select "Visible" for the vertical overflow and the horizontal overflow.
  • Validate.
3. The window for defining the anchors is displayed:
Versions 18 and later
Note: If the control is stackable, a specific window for defining anchors is displayed. See Anchor of stacked controls for more details.
New in version 18
Note: If the control is stackable, a specific window for defining anchors is displayed. See Anchor of stacked controls for more details.
Note: If the control is stackable, a specific window for defining anchors is displayed. See Anchor of stacked controls for more details.
4. In this window, choose the type of anchor to use. The available options are as follows:
No anchorThe control is not modified when the size of the browser or the size of the container element (cell, looper, ...) is modified. No anchoring option is selected.
WidthThe control stretches to the right when the the browser or the container element (cell, looper, ...) is enlarged.
RightThe control moves to the right when the browser or the container element (cell, looper, ...) is enlarged.
Horizontally centeredThe control remains centered in width in the browser (or in the container element) regardless of the browser width.
HeightThe control stretches to the bottom when the the browser or the container element (cell, looper, ...) is enlarged.
Width and HeightThe control stretches to the right and to the bottom when the browser (or the container element) is enlarged.
Height and RightThe control stretches to the bottom and moves to the right when the browser or the container element (cell, looper, ...) is enlarged.
Height and horizontally centeredThe control stretches to bottom and it remains horizontally centered when the browser or the container element (cell, looper, ...) is enlarged.
BottomThe control moves to the bottom when the browser (or the container element) is enlarged toward the bottom.
Width and BottomThe control stretches to the right and moves to the bottom when the size of the browser (or the size of the container element: cell, looper, ...) is increased.
Right and BottomThe control moves to the right and to the bottom when the size of the browser (or the size of the container element: cell, looper, ...) is increased.
Horizontally centered at bottomThe control remains horizontally centered in the browser regardless of the browser width. However, the control is anchored at the bottom and it moves to the bottom when the browser is enlarged.
Vertically centeredThe control remains vertically centered in the browser (or in the container element) regardless of the browser height (or regardless of the height of the container element).
Width and vertically centeredThe control stretches to right and it remains vertically centered when the browser or the container element (cell, looper, ...) is enlarged.
Vertically centered to rightThe control remains vertically centered in the browser (or in the container element) regardless of the browser height (or regardless of the height of the container element). However, the control is anchored to the right and it moves to the right when the browser or the container element (cell, looper, ...) is enlarged.
CenteredThe control remains centered in height and in width in the browser (or in the container element) regardless of the browser size (or regardless of the size of the container element).
This window is used to define:
  • the anchoring in position, that manages the move of the control according to the change of browser size (or container size).
  • the anchoring in size, that manages the enlargement of the control according to the change of browser size (or container size). In this case, you must specify whether the enlargement of the control is performed in relation to the browser (or container) or in relation to the content.
5. Validate. The controls are automatically anchored according to these indications. The anchors are represented by red or blue arrows in the editor.

Viewing the anchors: red arrows or blue arrows

To enable the viewing of anchors, select "Display .. Options .. Show the anchors" (or press F6). To enable the viewing of anchors, on the "Display" pane, in the "Show (all the controls)" group, check "Anchors" (or press F6).
Two types of arrows may appear:
  • The red arrows represent the anchors implemented by the developer.
  • The blue arrows represent the anchors deduced by WEBDEV to comply with the HTML constraints.
Example:
In this example, the anchoring was implemented on the looper (red arrows). The button found beside the looper was automatically anchored by WEBDEV (blue arrows).
If anchoring conflicts occur and if WEBDEV cannot correct the conflict, a specific GUI error is displayed.

Special case for the loopers: Anchoring in relation to the content and maximum number of rows per page

The option "Maximum number of rows per page" is used to define the number of rows displayed on the page.
  • If the number of rows is greater than the number of rows specified: a ruler can be displayed below the control for example.
  • If the number of rows is lower than the number of rows specified: the space for the maximum number of rows is reserved by default. An empty space will appear if controls are found below the looper.
To avoid having this space, you must specify that the anchoring is performed in relation to the content.

Special case: Anchoring in relation to the content

When a container is anchored (looper, layout area, cell, ...), the controls found in this container automatically inherit from the anchoring in position.
In this case, we advise you not to define any anchoring in position because:
  • the loading of pages will be slower.
  • unexpected effects may appear.

Special case: Anchoring the controls of a container

When all the controls found in a container are anchored in position (by multi-selection for example), if the container is not anchored, the container will be automatically anchored in position like all the controls contained inside it.
Some examples
Let's take a simple example: a Static control containing a text taking more or less space. For the third Static control, the overflow was defined in the "Style" tab of the description window of the control.
  • Static control not anchored:
  • Static control anchored in width:
  • Static control anchored in width and adapted to the content: regardless of the browser size and if no other HTML constraint exists, the static is adapted to the content.
Minimum required version
  • Version 17
Comments
Click [Add] to post a comment