x

The Responsive Item Properties dialog box provides options to change the dimensions of an individual item within the responsive container. You can access the Responsive Item Properties dialog box at design time by clicking the arrow in the upper-right corner of the item panel, as shown in the following image.

Note: The arrow is only visible if one or more check boxes are selected in the Panel properties.

The Responsive Item Properties dialog box is shown in the following image.

The properties for a responsive item are:

• Width. Defines the width of the item.
• Height. Defines the height of the item.
• Margin. Defines the space between the adjacent items.
• Shrink. Defines the ability of the item to shrink if necessary.
• Grow. Defines the ability of the item to grow if necessary.
• Basis. Specifies the initial size of the item, before any available space is distributed according to the responsive factors.
• Minimum Width. Sets the minimum width of the specified element. This setting overrides the Width setting.
• Maximum Width. Sets the maximum width of the specified item. This setting overrides the Width setting.
• Minimum Height. Sets the minimum height of the specified item. This setting overrides the Height setting.
• Maximum Height. Sets the maximum height of the specified item. This setting overrides the Height setting.
• Self Align. Provides access to the following options:
  • Auto. Intuitively places the item in the best available space inside the responsive container.
  • Start. Aligns the item to the left side of the responsive container.
  • End. Aligns the item to the right side of the responsive container.
  • Center. Aligns the item to in the center of the responsive container.
  • Stretch. Stretches the item to fill the available space inside the responsive container, while respecting width and height constraints.
  • Baseline (text). Aligns the baseline of text inside the responsive container.

Note: In a responsive portal, setting fixed dimensions for items is not recommended, because the viewport width and height continually change from device to device. Responsive layouts need to adapt to this change, whereas fixed dimensions create too many constraints. For this reason, you must only set a range between minimum and maximum width and height, defining an amplitude with which the item can vary in size.

x

The Responsive Panel Properties dialog box provides options to manually change the layout of the items inside a responsive container. You can access the Responsive Panel Properties at design time by clicking the arrow in the upper-right corner of the container panel, as shown in the following image.

Note: The arrow is only visible if one or more check boxes are selected in the Panel properties.

The Responsive Panel Properties dialog box is shown in the following image.

The properties for a responsive panel are:

• Display. Determines the behavior of the items inside the responsive container. The values are:
  • Flex. Forces the items behave like block elements inside the responsive container.
  • Flex Inline. Forces the items behave like inline elements inside the responsive container.

    Note: Flex is a CSS standard that is leveraged in this product.

• Direction. Specifies how items are placed in the responsive container, defining the main axis and the direction (normal or reversed). The values are:
  • Row. Aligns items in a horizontal line, where the main axis follows the direction of the content.
  • Row Reverse. Same as Row, but the start and end points are reversed.
  • Column. Aligns the items in a vertical line, in descending order.
  • Column Reverse. Aligns the items in a vertical line, in ascending order.
• Wrap. Determines whether the items are forced into a single line or can flow across multiple lines. The values are:
  • Wrap. Forces the items flow across multiple lines.
  • No Wrap. Forces the items into a single line.
• Justification. Defines how a browser distributes the available space between, and around items, when aligning them inside the responsive container. The values are:
  • Start. Aligns the items along the right side of the responsive container.
  • End. Aligns the items along the left side of the responsive container.
  • Center. Aligns the items symmetrically along an axis in the middle of the container, leaving an equal gap on either side.
  • Space Between. Distributes the items evenly along the line with an equal space between the adjacent items. There is no gap on either side of the container.
  • Space Around. Distributes the items evenly along the line with an equal space between the adjacent items. The gap of each side of the container equals half of the space between two adjacent items.
• Align Items. Aligns the items inside the responsive container in the same way as the Justification property, but in the perpendicular direction. The values are:
  • Start. Aligns the items along the top of the responsive container.
  • End. Aligns the items along the bottom of the responsive container.
  • Center. Aligns the items symmetrically along a cross-axis of the container. If the height of the item is larger than the responsive container canvas, it will overflow equally in both directions.
  • Stretch. Stretches the items to fill the container canvas without any gaps, while respecting width and height constraints.
  • Baseline (text). Aligns the baseline of text inside the responsive container.
• Align Content. Determines the alignment of the lines of items inside the responsive container. This property has no effect on single line formations. The values are:
  • Start. Aligns the lines of items along the top of the responsive container. There are no gaps between the lines.
  • End. Aligns the lines of items along the bottom of the container. There are no gaps between the lines.
  • Center. Aligns the lines of items toward the center of the container. There are no gaps between the lines. The space between the top edge of the container and the first line is equal to the space between the bottom edge of the container and the last line.
  • Stretch. Stretches the lines of items to use the available space. The free space is split equally between all the lines.
  • Space Between. Distributes the lines of items evenly inside the container. The spaces between the adjacent lines are the same. There are no gaps between the edges of the container and the lines.
  • Space Around. Distributes the lines of items evenly inside the container. The spaces between the adjacent lines are the same. The space before the first and after the last lines equals half of the space between two adjacent lines.