Question
Custom Modal Dialog position into the screen
Hello everybody
I need to move the modal dialog from the center of the screen to the right in order to do not cover an important part of the parent page.
I can replicate the same on the modal screen as a workaround, but that is not the ideal in my case.
I've been looking into HTML source of pzModalAction with no luck (but I'm not a javascript/css specialist).
Any guidance/tip would be highly appreciated.
Thanks in advance
Hi Neha,
Thank you for your reply.
I had checked before those options under skin rule and come to check again as you mentioned, but there is no option regarding the modal position on the screen, which is always positioned in the center. I would like to make it appear on the right side instead of centered as it is now.
Best regards,
Las
Hi Las,
You can use the browser developer tool and find the div element and modify the css.
Hi AkshaySinha,
Thank you for your answer mate.
And I'm sorry if it is a tool dumb question, I don't know this tool, "browser developer tool", within Pega Personal Edition, would you mind let me know where I can find it?
Thanks again in advance
Hi Las,
Browser developer tools is not a Pega tool, it is browser specific tool which is provided to the developer for debugging the client side code by browsers.
Chrome -> Ctrl+Shift+I shortcut can be used to open the developer tool
IE -> F12 can be used
Note: If this shortcuts doesn't work then you can go to the settings of browser and see in the list of options provided, else you can google it for your specific browser.
Hope you might find it with this information.
Regards
Mahesh
Hi Mahesh,
Thank you very much mate, it is crystal clear now.
Best regards,
Las
Hi all,
So, as far I could understand til this point, if I wish to change the modal position, I need to kind of force it through the css caught by "Browser developer tools".
Best regards,
Las
Accepted Solution
Hello Las,
Yes your understanding is completely correct. By default when it is a modal dialog component its behavior is show in the centre. This ability is based on the browser and not respective to Applications however we have a scope of overriding with Cascading Style Sheets(CSS).
Let us know if you still have any questions?
Regards,
Shanthini Charles
Hello Shanthini,
Thank you very much mate, and everybody who helped.
I hope you all are doing great.
See you around fellas
Las
HI, You can make the changes in skin rule. Reference Link:
https://pdn.pega.com/support-articles/incorrect-modal-dialog-screen-size-firefox