Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

UI distorted while editing rule KYC Type



UI is distorted while editing the customized rule KYC type.

Before reordering the row:

After reordering the row, UI is distorted:

Error Messages

Not Applicable

Steps to Reproduce

  1. Open any KYC type in Designer Studio or Rule Manager.
  2. Click Private Edit.
  3. Expand Group 1.
  4. Drag Item 1.1 below Item 1.2.

Root Cause

This is a nested grid use case. The Top grid is an Expand Pane grid that contains a section which contains a grid.
The Top grid and the inner grid are not related alignment wise. After row reordering of the inner grid, since both the grids behave independently, there is no assurance that two grids will be aligned.
Reordering can change the widths of the cells as the inner grid is configured to fill 100%.


Perform the following local-change:
  1. Check the 'Make header' checkbox for the inner grid. 
  2. Include the below CSS script in the UserWorkForm or Non-auto Section Include where the grid exists, or in the Application level CSS files.

    div[node_name='KYCItemGroupDetails'] div#gridBody_right tr:first-child div.oflowDiv

    div[node_name='KYCItemGroupDetails'] div#gridBody_right tr:first-child td.rowHandleHead

    div[node_name='KYCItemGroupDetails'] div#gridBody_right tr:first-child th


Suggest Edit

Published November 29, 2018 - Updated December 2, 2021

Did you find this content helpful? Yes No

Have a question? Get answers now.

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

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

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us