ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Editors / Window editor and page editor / Page editor / Responsive Web Design
  • 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
Warning
In version 28, the "Responsive Web Design: layout by slice" mode becomes "Slices (legacy Responsive mode)".
"Responsive (zoning and layouts)" is now the recommended mode for any new project. For more details, see New edit mode for mobile-friendly websites.
This page is adapted to the new options of version 28.
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.
  • 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" in the context menu of the page.
  2. The description window of page anchors is displayed.
The available options are:
  • Horizontal anchors: The horizontal anchor options are:
    • Fixed width: This option is used to fix the page width. The width specified in the "UI" tab of the page description window is used.
    • Enlarge or reduce like 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 left undefined, correspond to the size in edit mode or correspond to a value (in pixels).
  • Maximum width: This option is used to define the maximum page width in each slice. This width can be left undefined, correspond to the size in edit mode or correspond to a value (in pixels).
  • Vertical anchors: The vertical anchor options are:
    • Fixed height: This option is used to fix the page height. The height specified in the "UI" tab of the page description window is used.
    • Fit to content and pull other controls: This option is used to define the page height according to the page content. For example, for a Looper control with an infinite number of rows, the control and the page expand vertically according to the number of rows.
  • Minimum height: This option is used to define the minimum page height. It is available only if "Fit to content and pull other controls" has been selected. This height can be left undefined, correspond to the size in edit mode or correspond to a value (in pixels).

Anchoring for the page controls: the options

To define the anchors at control level:
  1. Select "Anchor" in the context menu of control.
  2. The control description window anchors is displayed.
The available options are:
  • 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.
  • Horizontal anchors: The horizontal anchor options are:
    • Fixed width: This option is used to define the control width regardless of the page size.
    • Fit to content and pull other controls: This option is used to reduce the control width to the minimum in order for its content to be visible.
    • Enlarge or reduce like the browser (or its container) (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 the behavior of the page in zoning mode.
  • Minimum width: This option is used to define the minimum width in each slice. This width can be left undefined, correspond to the size in edit mode or correspond to a value (in pixels).
  • Maximum width: This option is used to define the maximum width in each slice. This width can be left undefined, correspond to the size in edit mode or correspond to a value (in pixels).
  • Vertical anchors: The vertical anchor options are:
    • Fixed height: This option is used to define the control height regardless of the page size.
    • Fit to content and pull other controls: 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 control height. It is available only if "Fit to content and pull other controls" has been selected. This height can be left undefined, correspond to the size in edit mode or correspond to a value (in pixels).
  • When the content is bigger than the control:
    • Horizontally: This option allows you to define the behavior when the content overflows the control. You can:
      • Enlarge the control and push the controls to the right.
      • Truncate content.
      • Enable a scrollbar that will always be visible.
      • Display a scrollbar only if necessary.
    • Vertically: This option allows you to define the behavior when the content overflows the control. You can:
      • Enlarge the control and push the controls underneath it.
      • Truncate content.
      • Enable a scrollbar that will always be visible.
      • Display a scrollbar only if necessary.
Viewing anchors in Responsive Web Design
You can choose to view anchors in the editor: on the "Display" tab, in the "Show (all controls)" group, click "Anchors".
The different symbols used are as follows:
  • "Fixed width" anchor: ->x (symbol in earlier versions: ->).
  • "Enlarge or reduce like the browser" anchor: no symbol (symbol in earlier versions: o->).
  • "Fit to content and pull other controls" anchor: o<-
  • Minimum size reached: ||<-
  • Maximum size reached: ->||
Minimum version required
  • Version 21
Comments
Click [Add] to post a comment

Last update: 07/03/2023

Send a report | Local help