PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • 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/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview
In "Responsive Web Design", the size of controls evolves according to the creation mode of 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.
Note: 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 also have the ability to click a blade in the resolution bar to directly see the page in this blade.
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:
  • Use the edit size: This option is used to define the width or height of the page. The height or the width taken into account is the one specified in the "GUI" tab of the description window of the page.
  • Adapt to the grid: Via this option, the page is reduced or stretched according to the browser size.
  • Adapt to the grid without enlargement: If this option is selected, the page is reduced or stretched until it reaches the maximum edit size (height or width defined in the "GUI" tab of the page description) then it is centered.
  • Adapt to content: This option is used to define the page height according to the page content. For example, for a looper with an infinite number of rows, the lopper extends and the page is increased in height according to the number of looper rows.
The available options are as follows:
  • Width: The options corresponding to the width are:
    • Use the edit size: This option is used to define the page width. The width taken into account is the one specified in the "GUI" tab of the description window of the page.
    • Adapt to the grid: Via this option, the page is reduced or stretched according to the browser size.
  • Versions 22 and later
    Min width: This option is used to define the minimum page width in each blade. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    New in version 22
    Min width: This option is used to define the minimum page width in each blade. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    Min width: This option is used to define the minimum page width in each blade. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
  • Versions 22 and later
    Max width: This option is used to define the maximum page width in each blade. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    New in version 22
    Max width: This option is used to define the maximum page width in each blade. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    Max width: This option is used to define the maximum page width in each blade. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
  • Height: The options corresponding to the height are:
    • Use the edit size: This option is used to define the page height. The height taken into account is the one specified in the "GUI" tab of the description window of the page.
    • Adapt to content: This option is used to define the page height according to the page content. For example, for a looper with an infinite number of rows, the lopper extends and the page is increased in height according to the number of looper rows.
  • Versions 22 and later
    Min height: This option is used to define the minimum page height. It is available only if a height such as "Adapt to content" was chosen. This height can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    New in version 22
    Min height: This option is used to define the minimum page height. It is available only if a height such as "Adapt to content" was chosen. This height can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    Min height: This option is used to define the minimum page height. It is available only if a height such as "Adapt to content" was chosen. 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 for the controls:
  1. Select "Anchor" from the popup menu of control.
  2. The description window of control anchors is displayed.
The available options are as follows:
  • Anchor in X:
    • 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.
  • Width:
    • Adapt to the grid (default option): 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.
    • Use the edit size: This option is used to define the control width regardless of the page size.
    • Adapt to content: This option is used to reduce the control width to the minimum in order for its content to be visible.
  • Versions 22 and later
    Min width: This option is used to define a minimum width if the width is adapted to the grid or to the content. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    This option can be modified in each blade.
    New in version 22
    Min width: This option is used to define a minimum width if the width is adapted to the grid or to the content. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    This option can be modified in each blade.
    Min width: This option is used to define a minimum width if the width is adapted to the grid or to the content. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    This option can be modified in each blade.
  • Max width: This option is used to define a maximum width if the width is adapted to the grid or to the content. Therefore, the control may have a limit width. This width can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    Versions 22 and later
    This option can be modified in each blade.
    New in version 22
    This option can be modified in each blade.
    This option can be modified in each blade.
  • Height:
    • Use the edit size: This option is used to define the control height regardless of the page size.
    • Adapt to content: This option is used to reduce the control height to the minimum in order for its content to be visible.
  • Versions 22 and later
    Min height: This option is used to define a minimum control height. It is available only if a height such as "Adapt to content" was chosen. This height can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    New in version 22
    Min height: This option is used to define a minimum control height. It is available only if a height such as "Adapt to content" was chosen. This height can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
    Min height: This option is used to define a minimum control height. It is available only if a height such as "Adapt to content" was chosen. This height can be undefined, it can correspond to the size in edit or it can correspond to a value (expressed in pixels).
Minimum size of controls:
No minimum width is defined by default for the controls. The control is proportionally reduced when the browser is reduced. To define a minimum size:
  1. Display the description window of control.
  2. In the "GUI" tab, define the minimum width:
    • No minimum size.
    • Size in edit.
    • Custom value directly entered.
Special case: For the Button controls, the minimum size corresponds to the size in edit.
Viewing anchors in Responsive Web Design
You have the ability to enable the viewing of anchors in the editor: on the "Display" pane, in the "Show (all the controls)" group, click "Anchor".
The different symbols used are as follows:
  • "Use the edit size" anchor: ->
  • "Adapt to grid" anchor: o->
  • "Adapt to content" anchor: o<-
You have the ability to enable the viewing of anchors in the editor: on the "Display" pane, in the "Show (all the controls)" group, click "Anchor".
The different symbols used are as follows:
  • "Use the edit size" anchor: ->x (symbol of earlier versions: ->).
  • "Adapt to grid" anchor: no symbol (symbol of earlier versions: o->).
  • "Adapt to content" anchor: o<-
  • Minimum size reached: ||<-
  • Maximum size reached: ->||
Minimum required version
  • Version 21
Comments
Click [Add] to post a comment