Modifying the presentation options of the Columns layout
Make minor adjustments to the styling of the specific Columns.
- Click the Columns and in the header click the View properties icon.
- In the Properties window, click the Presentation tab.
- To use flexbox-based layout in your form, select theOptimize layout, markup,
and CSS with new releases (recommended) check box.A flexbox layout alters the width, height, and order of its contents to best fill the available space. The child layouts contained within this type of layout can be laid out in vertically or horizontally. When this check box is selected, after every release the markup is automatically updated to new, where possible.
- To use float-based layout in your form, select the Use static legacy layout,
markup, and CSSThis type of layout uses the inline block when setting several layouts side-by-side inline. When this check box is selected, backward compatibility is maintained.
- To float a dynamic layout to the far right or far left of the container in which the
dynamic layout is hosted, select an option from the Float
list.For more information on how to float dynamic layouts, see Using dynamic layouts to create responsive user interfaces article on the Pega Community.
- To ensures that width settings permit the layout to float. select the Set
layout width to auto check box.This check box is enabled by default if you set the Float option to Left or Right.
Clear this check box only if the Layout width for the specified dynamic layout format in the skin is less than 100%.
- To specify custom CSS classes or inline CSS, select the Display advanced
presentation options check box.
- To ensure that the top-level dynamic layout does not take up space and enables the
nested dynamic layouts to use styling, such as background color, set by the outer
dynamic layout, select the Self-clear check box.Select this option for a dynamic layout that contains other dynamic layouts that are floated.
- To display the layout group below other floated layout groups within the container in which it is hosted, select this Clear floated layouts check box.
- To define inline style for the layout, enter CSS code in the Inline
style (not for production use) field. Entering inline style results in a guardrail warning. For maintainability and reuse, use a custom CSS class.
- To specify styling of the layout container, press the Down arrow key in the
Container CSS class field to select a predefined class or
click the Open class editor icon to see a list of available
helpers.You can enter several helper classes, separated by a space. For more information, see Helper classes.
- To specify styling of the content within the layout, press the Down arrow key in
the Content CSS class field to select a predefined class or
click the Open class editor icon to see a list of available
helpers.You can enter several helper classes, separated by a space. For more information, see Helper classes.
- To ensure that the top-level dynamic layout does not take up space and enables the
nested dynamic layouts to use styling, such as background color, set by the outer
dynamic layout, select the Self-clear check box.
- Click Submit.
Previous topic Creating a columns layout Next topic Creating a repeating dynamic layout