SA-608

Summary

Normally, the red X that appears to denote a validation error appears next to the label of a field. When a developer uses a section inside a grid using the "expand pane" option, the error mark appears inside the field instead.

Error Messages

wrong placement of red cross mark.

Steps to Reproduce

1) Create a Grid with expand pane option.
2) Render a section which have some mandatory fields.
3) Don't use "Required Option" on text fields but instead make them mandatory when you hit submit button.
4) Run validation rules and and you will see red cross mark will render inside text field.

Root Cause

The root cause of this problem is due to the configuration in the Developers PRPC operating environment.

Resolution

Users were seeing the red 'x' for a field that was inside a grid. After playing with developer toolbar to understand where the position of the image needed to be, we created a custom css file and placed the following code in that css file. We referenced the css file in the scripts and styles tab of perform harness.



This is the code that went into the css file for this user

div.gridDefault div.iconErrorDiv {
    position: relative;
    left: -22 px;
}

Generally, it is a good idea to find out what works in a specific scenario and override those values in iconErrorDiv class if field is not inside grid and in div.gridDefault div.iconErrorDiv if the field is in a grid.