|
|
|
|
|
|
|
|
|
|
- Overview
- The available options
- Page-level anchors: options
- Anchoring page fields: options
- Viewing anchors in Responsive Web Design
Responsive Web Design: Managing anchors
 Warning
In version 28, the page editing mode initially called "Responsive Web Design: page layout by slice" becomes "Slices (Historical Responsive for compatibility)".. "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.
In "Responsive Web Design", the size of controls evolves according to the creation mode of the page: - Desktop First mode: when the browser width is reduced, field widths are reduced by default..
- Mobile First mode: when browser width increases, field widths increase by default.
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: Feel free to use the editing browser handle to view the behavior of fields when resizing the browser in the editor.. Indeed, this handle helps you design your page properly.
Tip: you can also click directly on a strikethrough in the resolution bar to view the page in that strikethrough. Page-level anchors: options To define the anchors at page level: - Select "Anchor" in the context menu of the page.
- The description window of page anchors is displayed.
The available options are as follows: - Anchoring in width: The options corresponding to anchoring in width are:
- Fixed width: This option allows you to set 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) With this option, the page contracts or stretches according to the size of the browser.
- Minimum width: This option defines the minimum page width for 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 defines the maximum page width for each slice.. This width can be left undefined, correspond to the size in edit mode or correspond to a value (in pixels).
- High anchorage: The options corresponding to high anchorage are:
- Fixed height: This option allows you to fix the page height.. The height specified in the "UI" tab of the page description window is used.
- Reduce to content and drag: This option sets 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 height of the page.. 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 page fields: options To define the anchors at control level: - Select "Anchor" in the context menu of the control.
- The control description window anchors is displayed.
The available options are as follows: - Position:
- Left: The space to the left of the field (in relation to the previous field or to the edge of the page) is retained proportionally when the page width is modified..
- Right: The space to the right of the field (in relation to the previous field or to the edge of the page) is retained proportionally when the page width is modified..
- Center: This option places the field in the center of 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.
- Anchoring in width: The options corresponding to anchoring in width are:
- Fixed width: This option allows you to set the width of the field regardless of the page size..
- Reduce to content and drag This option minimizes the width of the field so that its contents are visible.
- Enlarge or reduce as browser (or its container) (default option): This option preserves the existing proportions in the editor when the page stretches or contracts. This behavior is similar to the behavior of the page in zoning mode.
- Minimum width: This option is used to define the minimum width for 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).
- High anchorage: The options corresponding to high anchorage are:
- Fixed height: This option allows you to fix the height of the Page control regardless of the page size..
- Reduce to content and drag This option reduces the height of the field to a minimum so that its contents are visible.
- Minimum height: This option is used to define the minimum height of the field.. 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:
- In width: This option allows you to choose the behaviour when the content is larger than the field.. It is possible to:
- 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.
- In height: This option allows you to choose the behaviour when the content is larger than the field.. It is possible to:
- 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 activate anchor viewing in the editor: in the "Display" pane, in the "Show (all controls)" group, click on "Anchor".. The different symbols used are as follows: - "Fixed width" anchor type: ->x (symbol from previous versions: ->).
- Anchoring type "Expand and collapse like the browser": no symbol (symbol in previous versions: o->).
- "Fit to content and pull other controls" anchor: o<-
- Minimum size reached: ||<-
- Maximum size reached: ->||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|