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

Extra space appears above Next button in tabbed screen flow



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.


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:

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){ 
}else if (pega.u.d.formErrorType == "FLOAT" && document.getElementById("FormErrorMarker_Div") != null) { 
} else { 

// 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"; 


3. Save UserWorkForm and retest.


Published July 29, 2015 - 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