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

Font format changing & UI alignment changes on validation in UAT



Font format and UI alignment changes on validation with Pega 7.1.9.

Error Messages

On error the field lable format changes and the field alignment changes

Steps to Reproduce

1. Create a local action (modal dialog) on click of a text or button.
2. Create four fields three text inputs and a drop-down. Note the arrangement of the fields should be textinput, drop-down, textinput, textinput.
3. Add validation(value cannot be blank) on any two text input.
4. Run the case.
5. Click on the button that you have configured for the local action.
6. Without filling the values click Submit button. Observe the validation errors on the screen.

​The alignment of the drop-down field which does not have validation will change.

Root Cause

When validation message is shown in the field a div tag is added for that field to show the validation message and therefore the alignment of the field changes but since no validation is done for the drop-down field the alignment remains same as no div tag is added for that field and therefore this looks distorted in the UI.


Perform the following local-change:

1. Increase row height for the grid to a comfortable amount where the row can accommodate both the input element and the error message.

2. Then, add the following CSS snippet to UserWorkForm / CSS file included in the Harness -

.gridCell .inputErrorDiv {
position: absolute;
top: 0;

Observe that each row after this local change is taking too much space and therefore provided below local change:

In the inline style field give the value as "vertical-align:bottom" and in the Height field give the value accordingly(reduce the value) so that it reduces the height of the row so that it accommodates the validation error only and hence reduces the row height.

Published July 10, 2017 - Updated October 8, 2020

Was this useful?

0% found this useful

Have a question? Get answers now.

Visit the Collaboration 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 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