Support Article
Extra space appears above Next button in tabbed screen flow
SA-11486
Summary
User has designed a tabbed screen flow, where screens have fields with basic validations on them. When the fields are validated, the error messages are displayed on top of the harness, and subsequently the space above "Next" button increases.
Error Messages
Not Applicable.
Steps to Reproduce
1. Create a tabbed screen flow.
2. In the screens, have fields with validations on them (preferably server side validations).
3. When the flow is run, click the Next button and observe that the space above the button increases.
Root Cause
In Pega 7.1.7, with Internet Explorer 8 as the browser, the height of HARNESS_CONTENT div is not set to 100%. This is a regression because in Pega 7.1.6, in Internet Explorer 8 also, the height of HARNESS_CONTENT div is set to 100% and the extra white space is not added. For other browsers (Chrome, Internet Explorer 9, Internet Explorer10, Internet Explorer 11), the height of HARNESS_CONTENT div is set to 100% in both Pega 7.1.7 and Pega 7.1.6.
Resolution
Overriding the displayFormErrors API in userworkform and adding the Internet Explorer condition helps resolve this issue.
Perform the following local change:
1. Save the HTML Fragment UserWorkForm into your own ruleset (if it is not already).
2. Add the following script to UserWorkForm:
<script>
pega.ui.Doc.prototype.displayFormErrors = function (errorText) {
// Check for empty error messages
if (errorText != null && errorText != "" && pega.u.d.removeEmptyLines(errorText) != "") {
if(pega.u.d.bIsFlowInModal == true && pega.u.d.bModalDialogOpen == true){
pega.u.d.displayErrorsOnModal(errorText);
}else if (pega.u.d.formErrorType == "FLOAT" && document.getElementById("FormErrorMarker_Div") != null) {
pega.u.d.FloatDivInit(errorText);
} else {
pega.u.d.defaultErrorDivInit(errorText);
}
}
// Check for error table
else if (document.getElementById("ERRORTABLE") != null) {
// Hide the ERRORTABLE when no error messages
document.getElementById("ERRORTABLE").style.display = "none";
}
/*HFix-21574: Updated last condition to check for 'display' property.*/
if(document.getElementById("HARNESS_CONTENT")&& document.getElementById("HARNESS_BUTTONS") && document.getElementById("PEGA_HARNESS") && (document.getElementById("ERRORTABLE") && document.getElementById("ERRORTABLE").style.display != "none")) {
if(pega.u.d.isInitialHarnessContentHeight) {
pega.u.d.initialHarnessContentHeight = parseInt(document.getElementById("HARNESS_CONTENT").offsetHeight,10);
pega.u.d.isInitialHarnessContentHeight = false;
}
/*HFix-21574: Suffixed 'px' while setting the height.*/
if(pega.util.Event.isIE && pega.util.Event.isIE != 8){
document.getElementById("HARNESS_CONTENT").style.height=pega.u.d.initialHarnessContentHeight-(document.getElementById("PEGA_HARNESS").offsetHeight-document.getElementById("HARNESS_CONTENT").offsetHeight) + "px";
}
}
}
</script>
3. Save UserWorkForm and retest.
Published July 29, 2015 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.