PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
This content has been translated automatically. Click here to view the French version.
  • Overview
  • The available options
  • Anchoring at page level: the options
  • Anchoring for the page controls: the options
  • Viewing anchors in Responsive Web Design
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
In "Responsive Web Design", the size of controls evolves according to the creation mode of the page:
  • Desktop First mode: the width of controls is automatically reduced when the browser width is reduced.
  • Versions 22 and later
    Mobile First mode: the width of controls is automatically increased when the browser width is increased.
    New in version 22
    Mobile First mode: the width of controls is automatically increased when the browser width is increased.
    Mobile First mode: the width of controls is automatically increased when the browser width is increased.
By default, the size of controls is proportional to the browser size.
To define the resizing of controls according to the browser size, WEBDEV proposes the anchoring mechanism, for the page and for the controls.
Remark: Don't hesitate to use the handle of the edit browser to view the behavior of controls in the editor when resizing the browser. Indeed, this handle helps you design your page properly.
Tip: you can also click a slice in the resolution bar to directly see the page in this slice.
The available options

Anchoring at page level: the options

To define the anchors at page level:
  1. Select "Anchor" from the popup menu of the page.
  2. The description window of page anchors is displayed.
The available options are as follows:
  • Anchor in width: The options corresponding to the width anchorage are:
    • Fixed width: This option is used to define the page width. The width taken into account is the one specified in the "UI" tab of the description window of the page.
    • Enlarge or reduce as the browser (or its container): Via this option, the page is reduced or stretched according to the browser size.
  • Minimum width: This option is used to define the minimum page width in each slice. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
  • Maximum width: This option is used to define the maximum page width in each slice. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
  • Anchor in height: The options corresponding to the height anchorage are:
    • Fixed height: This option is used to define the page height. The height taken into account is the one specified in the "UI" tab of the description window of the page.
    • Reduce to content and pull: This option is used to define the page height according to the page content. For example, in the case of an Looper control with an infinite number of lines, the Looper control expands and the page expands in height according to the number of lines of the Looper control.
  • Minimum height: This option is used to define the minimum page height. It is only available if a "Reduce to content and pull" height has been selected.. This height can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).

Anchoring for the page controls: the options

To define the anchors at control level:
  1. Select "Anchor" from the popup menu of control.
  2. The description window of control anchors is displayed.
The available options are as follows:
  • Position:
    • Left: The space on the left of control (in relation to the previous control or to the page side) is proportionally kept when modifying the page width.
    • Right: The space on the right of control (in relation to the previous control or to the page side) is proportionally kept when modifying the page width.
    • Center: This option centers the control in the page. This option can be used for a single control only. If two controls are found on the same line, the centering is ignored.
  • Anchor in width: The options corresponding to the width anchorage are:
    • Fixed width: This option is used to define the control width regardless of the page size.
    • Reduce to content and pull: This option is used to reduce the control width to the minimum in order for its content to be visible.
    • Enlarge or reduce as the browser (or its container) (option by Default): This option is used to keep the existing proportions in the editor when the page is stretched or reduced. This behavior is similar to te behavior of the page in zoning mode.
  • Minimum width: This option allows to define by the minimum width in each slice. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
  • Maximum width: This option allows you to define by the maximum width in each slice. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
  • Anchor in height: The options corresponding to the height anchorage are:
    • Fixed height: This option is used to define the control height regardless of the page size.
    • Reduce to content and pull: This option is used to reduce the control height to the minimum in order for its content to be visible.
  • Minimum height: This option is used to define the minimum height of the Control. It is only available if a "Reduce to content and pull" height has been selected.. This height can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
  • When the content is larger than control:
    • In width: This option allows you to choose the behavior when the content is larger than the Control. It is possible to:
      • Enlarge the control and push the control s on the right side.
      • Truncate content.
      • Activate an elevator (which will always be Visible).
      • Display an elevator only if necessary.
    • In Height: This option allows you to choose the behavior when the content is larger than the Control. It is possible to:
      • Enlarge the Control and push the Control s located below.
      • Truncate content.
      • Activate an elevator (which will always be Visible).
      • Display an elevator only if necessary.
Viewing anchors in Responsive Web Design
You have the ability to enable the viewing of anchors in the editor: 0.
The different symbols used are as follows:
  • Anchor type "Fixed width" type anchorage: ->x (symbol of earlier versions: ->).
  • Anchor type "Zoom in and out like the browser".: no symbol (symbol of earlier versions: o->).
  • Reduce to content and pull anchors.: o<-
  • Minimum size reached: ||<-
  • Maximum size reached: ->||
Minimum version required
  • Version 21
Comments
Click [Add] to post a comment