Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Modifying the presentation options of the Columns layout

Updated on November 15, 2021
Applicable to Theme UI-Kit applications

Make minor adjustments to the styling of the specific Columns.

  1. Click the Columns and in the header click the View properties icon.
  2. In the Properties window, click the Presentation tab.
  3. 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.
  4. To use float-based layout in your form, select the Use static legacy layout, markup, and CSS
    This 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.
  5. 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 example: If you want two dynamic layouts to display on the same line in a header bar, use the Float option.
    For more information on how to float dynamic layouts, see Using dynamic layouts to create responsive user interfaces article on the Pega Community.
  6. 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%.

  7. To specify custom CSS classes or inline CSS, select the Display advanced presentation options check box.
    1. 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.
      Note: This setting applies only to IE10 and Chrome browsers.
    2. 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.
    3. 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.
    4. 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.
    5. 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.
  8. Click Submit.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us