Responsive Layout: Mostly Fluid

Video Tutorial: Create a layout in AVEVA OMI

Column Span Property

The Mostly Fluid method for configuring a responsive layout uses the Column Span property to set how much of the layout width a pane use at a given screen size. Recall that Column Span can be any integer from 1 to 12, where 12 indicates that the pane will be 100% (12/12 columns) of the layout width. If Column Span is set to 6, the pane will be 50% (6/12 columns) of the layout width.

• The Column Span default for each pane is set by the Extra Small (Mobile) setting. The default is 12 and propagates to all screen sizes, if no overrides have been entered for a larger screen size.

• When the Column Span property is set to 0 for Small (Tablet) or larger screen sizes, it indicates that the parameter is using a setting that was configured for a smaller screen. If an override is set, the override propagates to larger screen sizes, unless a different number is set at a larger size.

• A number other than 0 indicates an override. It is not necessary to set overrides for every screen size. You only need to override a setting if you want to change the Column Span that was configured for a smaller screen setting.

To Configure a Mostly Fluid Responsive Layout

1. Open the layout in the Layout Editor.

2. Switch to Responsive Layout view by enabling the IsResponsive layout property, or by clicking the Fixed/Responsive button in the title bar.

3. Add panes for each content item by clicking the New Pane button .

   Each new pane is added with default settings for width and height. The default width setting is 12 columns and the default height setting is 300 pixels; the height setting is constant for all screen sizes.

4. To resize a pane, select both the pane and the applicable screen size to which you want to apply overrides.

   • Pane width is set by the Column Span property. This is located under the applicable screen size area of the Pane Properties grid (Extra Small, Small, Medium, Large, Extra Large). The default width, which is displayed under the Extra Small (Mobile) screen size category, is 12 columns. This indicates that the pane will take up the full layout width.

     For each of the larger screen size, Column Span is initially 0. This indicates that a previous setting for a smaller screen size will be used. Change the pane width as needed by setting a new Column Span. Screen sizes set to 0 will use the setting from a smaller size.

   • Pane height is set by the Height property (located in the Size properties area of the Layout Editor), and applies to all screen sizes. The default height is 300 pixels. Minimum height is 1 pixel. Change pane height as needed to accommodate the content that will be added.

   When the combined column span of two or more adjacent panes is 12 or less, the panes will be displayed side-by-side for the screen size(s) that match that configuration. For example, if Column Span for three adjacent panes is set to 4 in each pane, the panes will fit in a single row (3 panes x 4 columns = 12).

5. To test the responsive behavior within the Layout Editor, drag the right or left edge of the layout to change its width. As the layout size exceeds or falls under the dimension that defines a particular layout size, panes that have Column Span overrides will move. You can observe the same behavior in the ViewApp editor, once you have added the layout to a ViewApp. To check runtime behavior, use the Preview button in the ViewApp Editor, or deploy the ViewApp. As you resize the ViewApp, panes with Column Span overrides will move as the width of the ViewApp changes.

6. Click the Save and Close button on the menu bar to save your changes and close the Layout Editor.