Support Article

Font format changing & UI alignment changes on validation in UAT

SA-37777

Summary



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.

Resolution



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 -

<style>
.gridCell .inputErrorDiv {
position: absolute;
top: 0;
}
</style>


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 May 10, 2017 - Updated July 10, 2017

Have a question? Get answers now.

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