Please ensure Javascript is enabled for purposes of website accessibility
Powered by Zoomin Software. For more details please contactZoomin

AVEVA™ Operations Management Interface

About responsive layout propagation

  • Last UpdatedDec 06, 2024
  • 3 minute read

Responsive layout properties, with the exception the Show Pane property, always propagate from smallest to largest (see below for more information about Show Pane). Therefore, you initially set the properties at the smallest screen size. These become the default parameters for the larger screen sizes. Each layout size has its own configuration parameters, and you can set the number of columns for a pane at each screen size. You can also modify the display behavior of a pane at a particular screen size by using column push/pull and offset parameters. You can also set whether or not a pane will be visible at a particular screen size. Use the following parameters to set pane size and display behavior. These are configurable for each screen size. Always configure the smallest screen first, since the parameters propagate from smallest to largest.

  • Column Span: Sets the width of the selected pane by number of columns. The minimum is one, and full layout width is 12 (maximum). The default is 12.

  • Column Push: Moves the selected pane to the right by the number of columns specified. Only the selected pane moves. If there is a pane to the right, it covers the pushed pane. The default is 0.

  • Column Pull: Moves the selected pane to the left by the number of columns specified. Only the selected pane moves. If there is a pane to the left, it is covered by the pulled pane. The default is 0.

  • Pane Offset: Similar to column push, but offset is also pushes any panes to the right by the same number of columns. Unlike Column Push, an offset pane is not covered by the adjacent pane to the right. The default is 0.

  • Show Pane: Determines if the pane is visible or hidden for a particular screen size. The default is visible (Show Pane is enabled). The Show Pane property only applies to the screen size for which it is set; it does not propagate. The ShowContent() method does not work with hidden panes.

    Responsive layout propagation

    Number1

    Default pane settings, configured at smallest screen size (Extra Small).

    Number2

    Override settings for Column Span and Column Push, configurable for each larger screen size (in this case, Small). The overrides for Small apply to Small screens and larger. Settings with 0 (Column Pull and Pane Offset) indicate no override.

  • You can enter overrides for one or all of the larger screen sizes. Any overrides set at one screen size become the default settings at larger screen sizes. For example, if you override settings for Laptop (medium) size, those overrides become the default settings for the Desktop (large) size as well.

  • When a parameter is set to 0, it indicates that there is no override at that particular level of screen size, and that the default parameters set for a smaller screen have not been overridden.

TitleResults for “How to create a CRG?”Also Available in