Support Article
Modal window length does not adjust correctly between tabs
SA-11116
Summary
You use a modal window with several tabs which contain content of varying length. When switching between the tabs, the length of the modal window remains fixed based on the largest content displayed to that point, leaving extra white-space at the bottom of the window when the content is shorter.
Error Messages
Not Applicable
Steps to Reproduce
1. Place two or more tabs on a modal window.
2. Place longer vertical content on one tab.
3. Switch between them and you will notice that the modal window size remains fixed at the large content size.
Root Cause
The root cause of this problem is a defect in Pegasystems’ code/rules which causes the height of the modal window to not update correctly (based on the height of the tabbed content).
Resolution
This issue in PRPC 6.2 SP2 is resolved by adding the following script to the UserWorkForm:
<script>
/*
@private Used to set the Modal dialog Height.It will be called by resizeModalDialog api
@Handler
@param $Obj$modalDialogBody Modal dialog body div object
@param $Obj$dimensionObj - Contains the width and height dimensions
*/
pega.ui.Doc.prototype.setModalDialogHeight = function(modalDialogBody,actionIframeSec,dimensionObj){
var modalDialogBodySH = 0;
if(pega.util.Event.isIE){
modalDialogBodySH = pega.u.d.getDivScrollHeight(modalDialogBody,false);
}else{
modalDialogBodySH = pega.u.d.getDivScrollHeight(document.getElementById("modaldialog_bd"),false);
modalDialogBodySHNonIe = pega.u.d.getDivScrollHeight(modalDialogBody,false);
}
if(pega.u.d.MODALDIALOG_MIN_HEIGHT < parseInt(modalDialogBodySH)) {
pega.u.d.MODALDIALOG_MIN_HEIGHT = parseInt(modalDialogBodySH);
}
var contentHieght = dimensionObj.height;
var wagIframeEle = null;
var isPortal = false;
var panelDiv = null;
var portalHarnessBody = null;
var isActionIframe = (window.frames.name == "actionIFrame");
if(isActionIframe) {
wagIframeEle = window.parent.frameElement;
if(wagIframeEle != null && typeof(wagIframeEle.PegaWebGadget) != "undefined" && typeof(window.parent.parent.pega) != "undefined" && typeof(window.parent.parent.pega.u) != "undefined" && typeof(window.parent.parent.pega.u.d) != "undefined" && window.parent.parent.pega.u.d.isPortal()) {
isPortal = true;
panelDiv = parent.pega.u.d.getPanelDiv();
portalHarnessBody = parent.parent.document.body;
}
} else {
wagIframeEle = window.frameElement;
if(wagIframeEle != null && typeof(wagIframeEle.PegaWebGadget) != "undefined" && typeof(window.parent.pega) != "undefined" && typeof(window.parent.pega.u) != "undefined" && typeof(window.parent.pega.u.d) != "undefined" && window.parent.pega.u.d.isPortal()) {
isPortal = true;
panelDiv = pega.u.d.getPanelDiv();
}
}
if(isPortal) {
var offset = 0;
if(isActionIframe) {
offset = pega.u.d.getOffSet(window.frameElement,window.parent.frameElement.contentWindow.document.body) + pega.u.d.getOffSet(wagIframeEle,portalHarnessBody) - pega.u.d.getOffSet(panelDiv,portalHarnessBody);
} else {
offset = pega.u.d.getOffSet(window.frameElement,panelDiv.parentNode);
}
var panelParentNode = panelDiv.parentNode;
var panelScrollTop = panelParentNode.scrollTop;
var panelOffSetHt = panelParentNode.offsetHeight;
var docOffSetHt = document.body.offsetHeight;
if(panelParentNode.scrollTop - offset > 0) {
contentHieght = panelOffSetHt;
} else {
contentHieght = panelOffSetHt-(offset - panelScrollTop);
}
if((docOffSetHt-panelScrollTop-offset) < (panelOffSetHt-offset)) {
contentHieght = docOffSetHt-panelScrollTop-offset;
}
}
if(contentHieght > pega.u.d.MODALDIALOG_ADJUSTMENT ){
contentHieght = contentHieght - pega.u.d.MODALDIALOG_ADJUSTMENT;
}
var styleCssText = "", headerHeight = 0, footerHeight = 0;
if(pega.u.d.MODALDIALOG_BUTTONS_HEIGHT == 0) {
var sectionTable = pega.util.Dom.getElementsById("EXPAND-OUTERFRAME", document.getElementById("modaldialog_bd"), "TABLE");
if(sectionTable != null){
sectionTable = sectionTable[0];
var buttonsTable = sectionTable.nextSibling;
if(buttonsTable != null){
while(buttonsTable.nodeType !=1){
buttonsTable = buttonsTable.nextSibling;
if(buttonsTable == null) break;
}
if(buttonsTable != null) {
pega.u.d.MODALDIALOG_BUTTONS_HEIGHT = buttonsTable.offsetHeight;
}
}
}
}
if(document.getElementById("modaldialog_hd") != null ){
headerHeight = document.getElementById("modaldialog_hd").offsetHeight;
}
if(document.getElementById("modaldialog_ft") != null ){
footerHeight = document.getElementById("modaldialog_ft").offsetHeight;
}
if( (modalDialogBodySH + headerHeight + pega.u.d.MODALDIALOG_BUTTONS_HEIGHT + footerHeight) > contentHieght && !actionIframeSec){
modalDialogBody.style.height = contentHieght - headerHeight - pega.u.d.MODALDIALOG_BUTTONS_HEIGHT;
pega.u.d.MODALDIALOG_MIN_HEIGHT = contentHieght - headerHeight - pega.u.d.MODALDIALOG_BUTTONS_HEIGHT;
/* add scollbar adjustment to width. else we get an unnecessary horizontal scrollbar*/
if(modalDialogBody.style.overflow !="auto"){
var borderWidth = parseInt(window.getComputedStyle?(window.getComputedStyle(modalDialogBody, null)["borderLeftWidth"]||modalDialogBody.style.overflow): (modalDialogBody.currentStyle ? modalDialogBody.currentStyle["borderLeftWidth"]:modalDialogBody.style.borderLeftWidth||0)) + parseInt(window.getComputedStyle?(window.getComputedStyle(modalDialogBody, null)["borderRightWidth"]||modalDialogBody.style.overflow): (modalDialogBody.currentStyle ? modalDialogBody.currentStyle["borderRightWidth"]:modalDialogBody.style.borderRightWidth||0));
borderWidth = isNaN(borderWidth) ? 0 : borderWidth;
document.getElementById("modaldialog").style.width = parseInt(modalDialogBody.scrollWidth)+ pega.u.d.SCROLL_ADJUSTMENT+borderWidth;
}
styleCssText += "overflow: auto;";
}else {
var styleCssText = "";
if(parseInt(modalDialogBodySH) > pega.u.d.MODALDIALOG_MIN_HEIGHT && (pega.u.d.modalTabContentWidth != 0)){
var height = pega.u.d.MODALDIALOG_MIN_HEIGHT + pega.u.d.SCROLL_ADJUSTMENT;
styleCssText += "height: " + height +"px;";
}
else {
if(pega.util.Event.isIE) {
var height = modalDialogBodySH + pega.u.d.SCROLL_ADJUSTMENT;
}
else {
var height = modalDialogBodySHNonIe;
if(modalDialogBody.scrollWidth > modalDialogBody.offsetWidth) {
height = height+pega.u.d.SCROLL_ADJUSTMENT;
}
}
styleCssText += "height: " + height +"px;";
}
if(modalDialogBody.style.overflow !=""){
pega.u.d.modalDialog.cfg.setProperty("height","");
styleCssText += "overflow:auto;";
}
}
if(pega.util.Event.isIE) {
document.getElementById("modaldialog_bd").style.height = "auto";
}
modalDialogBody.style.cssText += ";" + styleCssText;
};
</script>
Published June 24, 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.