Build a responsive layout

Fixed Layout/ Responsive Layout Button

Sets or clears the IsResponsive layout property. When IsResponsive is set, the build view changes from the default fixed layout view to the responsive layout view. Note that any configuration changes made in one view are not preserved when you switch between fixed and responsive views, since the two views cannot be reconciled. If you switch views after configuring the layout, all unsaved changes are lost.

Current screen resolution

Shows the layout height and width, in pixels, of the layout as it is currently displayed in the editor. Entering a height or width value changes the displayed layout to match the new dimension. If a width value is entered, the applicable screen size icon (mobile, tablet, etc.) that corresponds to the value is automatically highlighted, and the displayed layout changes responsively to match the configuration for that screen size.

Mobile icon

Selecting the Mobile icon changes the layout to match the settings entered for Extra Small layouts. Mobile settings apply to screens 767 pixels in width or less.

Tablet icon

Selecting the Tablet icon changes the layout to match the settings entered for Small layouts. Tablet settings apply to screens widths between 768 pixels and 991 pixels.

Laptop icon

Selecting the Laptop icon changes the layout to match the settings entered for Medium layouts. Laptop settings apply to screens widths between 992 pixels and 1199 pixels.

Desktop icon

Selecting the Desktop icon changes the layout to match the settings entered for Large layouts. Desktop settings apply to screens that are 1200 pixels in width or more.

Rotate layout

Changes the height of the currently-displayed layout to its width (and width to height). If this change in width exceeds the threshold value of the current layout size, the layout automatically changes to match the parameters of the new layout size. For example, rotating the layout when Mobile is selected changes its width to 812 pixels (the height setting), and thus the layout settings for Tablet devices take effect.

Increase Column Span

Each click increments the column span of the pane by one, up to the maximum of 12 columns.

Decrease Column Span

Each click decrements the column span of the pane by one, down to the minimum of 1 column.

Column Span

.Sets the number of columns for the selected pane. The default is 12 (100% of layout width). You can type a number from 1 to 12, or click the arrow to select from a list.

Hide Pane

Sets or clears the Show Pane property for the currently-selected screen size only. Unlike other settings, the Hide Pane setting does not propagate to larger screen sizes. Hidden panes are not shown runtime, and are hidden at design-time unless Show Hidden panes (18) is selected. The default setting of Show Pane is true for each screen size. The ShowContent() method does not work with panes that are hidden.

Delete Pane

Deletes the pane from the layout. The selected pane is deleted from the entire layout, not just the currently-selected screen size. If there is only one pane in the layout, the pane cannot be deleted.

Insert Pane before selected

Adds a new pane to the layout. The new pane is inserted before the currently-selected pane.

Insert Pane after selected

Adds a new pane to the layout. The new pane is inserted after the currently-selected pane.

Move Pane Before

Moves the the pane in the layout to the position immediately before its current position. If the pane is the first in the layout, the Move Pane Before button is disabled. The new position for the pane applies to all screen sizes.

Move Pane After

Moves the the pane in the layout to the position immediately after its current position. If the pane is the last in the layout, the Move Pane After button is disabled. The new position for the pane applies to all screen sizes.

Resize bar (layout border)

Select and drag the resize bar (thick black border) from either side of the layout to increase or decrease currently-displayed layout width. To change the height of the layout, select and drag the resize bar from the bottom. To change width and height simultaneously, select and drag the resize handle (not shown) at the bottom-right corner of the resize bar.

Show/Hide hidden panes

Shows or hides any hidden panes for the currently-selected screen size only. Hidden panes for other screen sizes are not affected. If hidden panes are shown, this applies to design-time only, not runtime.

Pane Option menu

Opens the context pane option menu. The options are:

• Rename Pane

• Set as Default Pane

• Delete Pane

If the pane contains content, additional options appear in the menu:

• Edit <Content Name>

• Remove Content

• Content Properties (toggles to Pane Properties when Content Properties are shown)

Pane name

This is an editable text field. Rename a pane by clicking on the name and entering a new one. You can also use the Rename Pane option in the Pane Option menu.

Extra small screen size properties

The default pane properties that are set for the screen size. These propagate to each of the larger screen sizes, unless overridden. Similarly, overrides serve as defaults for larger screen sizes, unless subsequently overridden at a larger screen sizes.

Small screen size properties

The set of pane property overrides that are set for the small (Tablet) screen size.

Medium screen size properties

The set of pane property overrides that are set for the medium (Laptop) screen size.

Add Pane Icon

Adds a new pane to the layout. The new pane is inserted after the last pane in the layout.