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 column layout

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Customize the styling and behavior of the column layout in your user interface to build a responsive application that meets your business needs.

Before you begin: Create a column layout for your application. For more information, see Creating a column layout.
  1. In the navigation pane of Dev Studio, click Records.
  2. Expand the User Interface category, and then click Section.
  3. From the section list, select the section that contains the target layout.
  4. In the Columns header, click the View properties icon.
  5. In the Column layout properties window, click the Presentation tab.
  6. Define the markup that you want to use for the layout:
    • To select the default responsive layout that updates automatically with each release, select Optimize layout, markup, and CSS with new releases (recommended).
    • To select a static layout that is consistent with Pega Platform version 7.x markup, select Use static legacy layout, markup, and CSS, and then select your Pega Platform version.
    Responsive layouts use flexboxes, while legacy markup relies on inline blocks for setting several layouts side-by-side.
  7. Optional: To specify custom CSS behavior, select the Display advanced presentation options check box, and then define the settings by performing any number of the following actions:
    • If your layout contains other layouts that are floated, to ensure that the top-level layout does not take up space and permits the nested layout to inherit styling, select the Self-clear check box.
      Note: This setting applies only to IE10 and Chrome browsers.
    • To display the column layout below other floated column layouts within the container that hosts the column layout, select the Clear floated layouts check box.
    • To define an inline style for the layout, in the Inline style (not for production use) field, enter CSS code.
      Note: Entering inline style produces a guardrail warning. For maintainability and reuse, use a custom CSS class. For more information, see CSS helper classes.
    • To specify the styling of the layout container, in the Container CSS class list, select a predefined class, or click the Open class editor icon to see a list of available helper classes.

      You can enter several helper classes, separated by a space. For more information, see CSS helper classes.

    • To specify styling of the content within the layout, in the Content CSS class list, select a predefined class, or click the Open class editor icon to see a list of available helper classes.

      You can enter several helper classes, separated by a space. For more information, see CSS helper classes.

  8. Click Submit.
  9. On the section form, click Save.

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