Modal Pop up is opening to right side section and getting scroll bars in Screen Layout Header Left
Added a button with local action in the right side section of the Screen Layout Header Left.
On click of the button, the modal dialog is opening with scroll bars to the right section in the harness of the Screen Layout Header Left .
How can i make it to full screen, for both left and right side of the section with out scroll bars.
PRPC Version v 7.2.
**Moderation Team has archived post**
This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.
Accepted Solution
Pegasystems Inc.
IN
Hello,
On reviewing the SR, we see that it is resolved with the below solution.
Perform the following local-change:
1. Create a custom javascript text rule and the place the below code in that rule.
2. Add the file in the Scripts & styles tab of the harness where the reported behavior is observed. This will ensure that the script is applicable to only to the places where the issue is observed and not all modal dialogs.
var modalAlign = function() {
var modaldialog = document.getElementsByClassName("modal-align-cell")[0];
if (modaldialog) {
var modalcontent = document.getElementsByClassName("modal-wrapper")[0].offsetHeight / 2;
var parentclientheight = top.document.documentElement.clientHeight / 2;
var iframeclientheight = document.documentElement.clientHeight;
modaldialog.style.paddingTop = (iframeclientheight - parentclientheight - modalcontent) + "px";
modaldialog.style.position = "fixed";
}
var modaldialog2 = document.getElementsByClassName("yui-panel-container")[0];
if (modaldialog2) {
var modalcontent2 = modaldialog2.offsetHeight / 2;
var parentclientheight2 = top.document.documentElement.clientHeight / 2;
var iframeclientheight2 = document.documentElement.clientHeight;
modaldialog2.style.paddingTop = (iframeclientheight2 - parentclientheight2 - modalcontent2) + "px";
}
Hello,
On reviewing the SR, we see that it is resolved with the below solution.
Perform the following local-change:
1. Create a custom javascript text rule and the place the below code in that rule.
2. Add the file in the Scripts & styles tab of the harness where the reported behavior is observed. This will ensure that the script is applicable to only to the places where the issue is observed and not all modal dialogs.
var modalAlign = function() {
var modaldialog = document.getElementsByClassName("modal-align-cell")[0];
if (modaldialog) {
var modalcontent = document.getElementsByClassName("modal-wrapper")[0].offsetHeight / 2;
var parentclientheight = top.document.documentElement.clientHeight / 2;
var iframeclientheight = document.documentElement.clientHeight;
modaldialog.style.paddingTop = (iframeclientheight - parentclientheight - modalcontent) + "px";
modaldialog.style.position = "fixed";
}
var modaldialog2 = document.getElementsByClassName("yui-panel-container")[0];
if (modaldialog2) {
var modalcontent2 = modaldialog2.offsetHeight / 2;
var parentclientheight2 = top.document.documentElement.clientHeight / 2;
var iframeclientheight2 = document.documentElement.clientHeight;
modaldialog2.style.paddingTop = (iframeclientheight2 - parentclientheight2 - modalcontent2) + "px";
}
};
pega.u.d.registerModalListener(modalAlign, true);
pega.u.d.attachOnload(modalAlign, true);
Pegasystems Inc.
IN
Hello Raj,
Thanks for posting your query in PSC :)
From the screenshot, I think you are using Fixed portal in Pega 7.2. Please confirm.
Also, your requirement is to open Model dialog in full size rather than just right side of the harness. Is my understanding correct?
Regards,
Rincy
Pegasystems Inc.
IN
Hi Rincy,
We are not using the Fixed portal. Previously it was in fixed portal later upgraded from 6.2 to 7.2. it is changed to composite portal with Screen Layout Header Left with dynamic container.
It is fine to get the modal pop up at right side center of the screen without scroll bars.
Pegasystems Inc.
IN
Hello Raj,
Refer the attached document that enable to make the modal dialog is full size.
Do let me know if this helps at your end.
Regards,
Rincy
Pegasystems Inc.
IN
Hi Rincy,
Thanks for the document.
But putting the custom size to make the model pop up big will not look good with small content in it.
I just want the modal popup without scroll bars.
Can you please let me know if we can make the modal popup without scroll bars.
Thanks for your help!
Pegasystems Inc.
IN
Dynamic container setting has following option checked:
- Use Legacy iFrame mode(not recommended)
- Size To Content
Reported issue (of modal dialog not displayed in the center of the work area) gets resolved on un-checking/disabling above options.
Pegasystems Inc.
IN
Pegasystems Inc.
IN
See if the left part of the section is also having iframe? If yes, try to remove it.
The modal dialog always tries to open up in the immediate harness/ iframe.
If the entire screen is having a single iframe and it is occupying full window, then the modal dialog will occupy full screen.
Pegasystems Inc.
IN
Hi,
It would work by removing the iframe mode, but i'm facing some other issues.
if i click on the button in the left side section the harness should launch in the right side section. But if i remove the iframe mode the harness launching in complete screen not in the right side section. That is why i applied that iframe mode with Size to Content.
Is there anyway to handle it if i remove iframe mode ?
Accepted Solution
Pegasystems Inc.
IN
Hello,
On reviewing the SR, we see that it is resolved with the below solution.
Perform the following local-change:
1. Create a custom javascript text rule and the place the below code in that rule.
2. Add the file in the Scripts & styles tab of the harness where the reported behavior is observed. This will ensure that the script is applicable to only to the places where the issue is observed and not all modal dialogs.
var modalAlign = function() {
var modaldialog = document.getElementsByClassName("modal-align-cell")[0];
if (modaldialog) {
var modalcontent = document.getElementsByClassName("modal-wrapper")[0].offsetHeight / 2;
var parentclientheight = top.document.documentElement.clientHeight / 2;
var iframeclientheight = document.documentElement.clientHeight;
modaldialog.style.paddingTop = (iframeclientheight - parentclientheight - modalcontent) + "px";
modaldialog.style.position = "fixed";
}
var modaldialog2 = document.getElementsByClassName("yui-panel-container")[0];
if (modaldialog2) {
var modalcontent2 = modaldialog2.offsetHeight / 2;
var parentclientheight2 = top.document.documentElement.clientHeight / 2;
var iframeclientheight2 = document.documentElement.clientHeight;
modaldialog2.style.paddingTop = (iframeclientheight2 - parentclientheight2 - modalcontent2) + "px";
}
Hello,
On reviewing the SR, we see that it is resolved with the below solution.
Perform the following local-change:
1. Create a custom javascript text rule and the place the below code in that rule.
2. Add the file in the Scripts & styles tab of the harness where the reported behavior is observed. This will ensure that the script is applicable to only to the places where the issue is observed and not all modal dialogs.
var modalAlign = function() {
var modaldialog = document.getElementsByClassName("modal-align-cell")[0];
if (modaldialog) {
var modalcontent = document.getElementsByClassName("modal-wrapper")[0].offsetHeight / 2;
var parentclientheight = top.document.documentElement.clientHeight / 2;
var iframeclientheight = document.documentElement.clientHeight;
modaldialog.style.paddingTop = (iframeclientheight - parentclientheight - modalcontent) + "px";
modaldialog.style.position = "fixed";
}
var modaldialog2 = document.getElementsByClassName("yui-panel-container")[0];
if (modaldialog2) {
var modalcontent2 = modaldialog2.offsetHeight / 2;
var parentclientheight2 = top.document.documentElement.clientHeight / 2;
var iframeclientheight2 = document.documentElement.clientHeight;
modaldialog2.style.paddingTop = (iframeclientheight2 - parentclientheight2 - modalcontent2) + "px";
}
};
pega.u.d.registerModalListener(modalAlign, true);
pega.u.d.attachOnload(modalAlign, true);