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

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Define the look and behavior of the dynamic layouts in your user interface to build a responsive application that meets your business needs.

Before you begin: Create a dynamic layout for your application. For more information, see Creating a dynamic 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 Dynamic layout header, click the View properties icon.
  5. In the Dynamic 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 release 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 when setting several layouts side-by-side.
  7. In the Float field, define the CSS float settings for your layout.
    For example: To float a dynamic layout to the rightmost corner of the container in which the dynamic layout is hosted, select Right.
  8. Optional: To ensure that the width settings permit the layout to float, select the Set layout width to auto checkbox.
    This checkbox is enabled by default if you set the Float option to Left or Right.
    Note: Clear this checkbox if the Layout width for the dynamic layout format in the skin is less than 100%.
  9. Optional: To specify custom CSS behavior, select the Display advanced presentation options checkbox, and then define the settings by performing any number of the following actions:
    • If your dynamic layout contains other layouts that are floated, to ensure that the top-level dynamic layout does not take up space and permits nested layouts to inherit styling, select the Self-clear checkbox.
      Note: This setting applies only to IE10 and Chrome browsers.
    • To display the layout group below other floated layout groups within the container in which it is hosted, select the Clear floated layouts checkbox.
    • To define 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 Content CSS class list, select a predefined class or click the Open class editor icon to see a list of available helper classes.
  10. Optional: To override the spacing between items that is set in the dynamic layout skin, select the options for the Top, Right, Bottom and Left fields.
  11. Click Submit.
  12. On the section form, click Save.

Related articles

Creating a dynamic layoutConfiguration options for layoutsAdding action sets to a controlAvailable UI actions

Tags

Pega Platform 8.7 User Experience

Have a question? Get answers now.

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

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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