|
|
|
|
|
- Overview
- How to implement the management of anchors?
- Anchor display: red or blue arrows
- Special case of RepeatString fields: Anchoring in relation to content and maximum number of lines per page.
- Special case: Anchoring to content
- Special case: Anchoring container fields
- For example
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".
- On 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: - Go to 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:
Note: If the field is superimposable, a specific anchor definition window appears.. 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 as follows: | | | | 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 field remains centered in height and width in the browser (or container element), whatever the size of the browser (or 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 field moves to the right and downwards as the size of the browser (or of the container element: cell, RepeatString, etc.) enlarges. | 6. Select the horizontal and vertical anchoring: - Width anchoring: defines the width behavior of the field when the reference field is resized.. The overlaid control can:
- keep the same width,
- adapt to the content,
- change along with the browser.
- Height anchor: defines the height behavior of the field when the reference field 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. Anchor display: red 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. Special case of RepeatString fields: Anchoring in relation to content and maximum number of lines 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 specified, a ruler can be displayed, for example, under the Pager control field..
- If the number of rows is less than the specified number: by default, the space for the maximum number of rows is reserved.. 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 to 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 container fields 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. Let's take a simple example: a Static Text control containing a text of varying size.. For the third Static Text control, the overflow was defined in the "Style" tab of the control description window. - Static Text control not anchored:
- Static Text control anchored in width:
- Static Text control field anchored in width and adapted to content: whatever the browser size and if no other HTML constraints exist, the label is adapted to the content.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|