Anchoring in a page

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | English

Help

Editors

Window editor and page editor

Anchoring in a page

Overview

How to implement the management of anchors?

For example

See also

Anchoring in a page

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.

How to implement the management of anchors?

To define the anchor of an element:

Select the requested element (control, layout area, cell, ...).
Define the element anchoring:
- in the "UI" tab of the element description window.
- via the "Anchor" option in the context menu of the desired 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:

On the "Page" tab, in the "Description" group, click "Description".
In the "General" tab, select "Edit in "zoning", positioning by blocks and anchoring on controls".
Validate.

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:

Remark: If the control is stackable, a specific window for defining anchors is displayed. For more details, see Anchor of stacked controls.

4. This window is used to define:

the anchoring in position, which determines how the control moves according to the size changes of the browser or container.
the horizontal and vertical anchoring, which determines how the control is enlarged according to the size changes of the browser or container . 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. Select the positioning to use. The available options are:


	No anchors	The control is not modified when the size of the browser or the size of the container element (cell, looper, ...) is modified.
	Horizontally centered	The control remains centered in width in the browser (or in the container element) regardless of the browser width.
	Right	The control moves to the right when the browser or the container element (cell, looper, ...) is enlarged.
	Vertically centered	The 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).
	Centered	The 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).
	Vertically centered to right	The 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.
	Bottom	The control moves to the bottom when the browser (or the container element) is enlarged toward the bottom.
	Horizontally centered at bottom	The 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.
	Right and Bottom	The 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.

6. Select the horizontal and vertical anchoring:

Horizontal anchors: allows you to define how the control will react (horizontally) when the reference control is resized. The overlaid control can:
- keep the same width,
- adapt to the content,
- change along with the browser.
Vertical anchors: allows you to define how the control will react (vertically) when the reference control is resized. The overlaid control can:
- keep the same height,
- adapt to the content,
- change along with the browser.

7. It is also possible to define the behavior of the control when the content is larger than the control itself. You can:

enlarge the control and push the other controls in the page,
truncate the content,
always enable a scrollbar,
display a scrollbar only when the content is larger than the control.

8. 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 show the anchors, go to the "Display" tab, "Show (all controls)" group and 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 control (red arrows). The Button control next to the Looper control was automatically anchored by WEBDEV (blue arrows).

If anchoring conflicts occur and if WEBDEV cannot correct them, a specific UI error appears.

Specific case of Looper controls: Anchoring in relation to the content and maximum number of rows per page

The option "Maximum number of rows per page" of Looper controls 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. If there are controls below the Looper control, an empty space will appear.

To avoid having this space, simply specify that the vertical anchoring of the Looper control is relative 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.

For example

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 control description window.

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.