Example: Configure a Mostly Fluid Responsive Layout

Open the layout in the Layout Editor.

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

Add panes for each content item by clicking the New Pane button . Each new pane is added with default settings for width and height. You can modify these settings later.

Select the Mobile (Extra Small) screen size and check the pane properties. Each pane should show its default property settings.

• Use the default setting as is (12 columns).

Select the Tablet (Small) screen size.

• For the Tablet screen size, change the Column Span property from 0 to 6 for both Pane 1 and Pane 2. These two adjacent panes will now be shown side-by-side. To display additional adjacent panes side-by-side (but in a different row), change their Column Span properties as well to numbers that add up to 12 or less.

• You can leave the Height property at the default, or modify it as needed. Panes that are shown side-by-side do not need to have the same height setting, and the height setting remains the same for all screen sizes.

Note: Property settings propagate from smallest screen size to largest. When a parameters is set to 0, as in this case, it indicates that the parameter set for a smaller screen (in this case, Mobile), will be use the Mobile settings. 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 from the prior (smaller) screen setting.

Select the Laptop (Medium) screen size. For this size device

• For the Laptop screen size, change the Column Span property from 0 to 4 for Pane 1, Pane 2, and Pane 3. These three adjacent panes will now be shown in one row. To display additional adjacent panes side-by-side (but in a different row), change their Column Span properties as well to numbers that add up to 12 or less.

Select the Desktop (Large) screen size.

• For the Desktop screen size, change the Column Span property from 0 to 3 for Panes 1, 2, 3 and 4. These four adjacent panes will now be shown in one row. To display additional adjacent panes side-by-side (but in a different row), change their Column Span properties as well to numbers that add up to 12 or less.

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 to allow panes that total 12 columns or less to next to each other.

• Once you have added the layout to a ViewApp, you can observe the same behavior in the ViewApp editor. To check run-time 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.