Issue  

Modal dialog displays at the bottom of the screen instead of centered after patch update in Pega Infinity ‘24.2.4. 

Symptoms and Imact

Modal dialogs rendered inside iframes in Constellation-based blended UI appear misaligned, impacting user experience.  

Standard Case Work Area rendering is unaffected. 

 Steps to Reproduce 

1. Deploy Pega Constellation with Theme Cosmos or deploy UI Kit with Constellation blended portal. 

2. Configure a section in the traditional app. 

3. Configure a button in the Section where Click action launches a modal dialog.  The Section or Page containing Modal Button should have more context which can be scrollable.

4. At runtime, click the button. Result: the modal dialog displays at the bottom of the screen. 

Root Cause   

This issue is a defect introduced in Pega Platform 24.2.4 affecting modal dialog positioning within iframes in blended UI applications.  

A fix intended for mobile modal dialog positioning appended inline CSS to iframe elements and modal-align-cell class, causing modal height to use full iframe scroll height rather than viewport height, resulting in bottom-screen placement in iframe mashup scenarios.  

The defect does not affect standard Case Work Area rendering outside of iframes.

Solution  

This issue will be resolved in upcoming releases.

Local Change

Apply the following code in the UseWorkForm: 

This JavaScript snippet recalculates and adjusts the modal dialog's vertical alignment and padding.  This ensures proper centering within the iframe viewport.  

<script> 
  setTimeout(() => { 
  pega.ui.Doc.prototype.modalAlignInMultiIframe = function(details) { 
    var _ref2 = details, 
        windowScroll = _ref2.windowScroll || 0, 
        offset = _ref2.offset || { top: 0, left: 0 }, 
        windowHeight = _ref2.windowHeight; 

    var modaldialog = document.getElementsByClassName("modal-align-cell")[0]; 
    var modalWrapper = document.getElementsByClassName("modal-wrapper")[0]; 

    if (modaldialog) { 
      modaldialog.style.verticalAlign = "baseline"; 
      modaldialog.style.paddingTop = "50px"; 
    } 

    if (!modalWrapper) return; 

    var modalcontentHeight = modalWrapper.offsetHeight; 
    var iframeclientheight = document.documentElement.clientHeight; 
    var scrolledHeight = windowScroll || 0; 
    var actualHeight; 
    var someFixedTopWIthinIframe = 50; 

    if (modalcontentHeight < windowHeight) { 
      someFixedTopWIthinIframe = parseInt((windowHeight - modalcontentHeight) / 2); 
    } 

    if (iframeclientheight < windowHeight) { 
      someFixedTopWIthinIframe = parseInt((iframeclientheight - modalcontentHeight) / 2); 
    } 

    if (scrolledHeight < offset.top) { 
      actualHeight = someFixedTopWIthinIframe; 
    } else { 
      actualHeight = scrolledHeight - offset.top + someFixedTopWIthinIframe; 

      if (actualHeight > iframeclientheight - modalcontentHeight) { 
        actualHeight = iframeclientheight - modalcontentHeight; 
      } 
    } 

    modaldialog.style.paddingTop = actualHeight + "px"; 
  }; 
}, 1000); 
   
</script> 

Users encountering this problem should apply the provided local change until an official patch is released. 

References

Embedding Constellation UI in web pages