Question
Accenture
IN
Last activity: 10 Dec 2019 0:22 EST
Modal Dialogue should be visible right side of the page
By default when we launch a modal dialogue on click of a hyperlink, it is occupying space from the place where it is launched. My requirement is to launch to the modal dialog to the right half of the whole screen.
Thanks in advance.
***Moderator Edit-Vidyaranjan: Updated Platform Capability***
Accepted Solution
Goldman Sachs Group Inc
IN
Hi @Divyabharathik
If your modal window is going to hold more space if there are lot of information to be shown, then code below as suggested earlier would help as it will introduce margin-left that would move your modal window to the right side.
.modal-wrapper {
margin-left: 500px;
}
However if the modal window is holding less information and if its small, adding margin-left will move it right side but modal window will end not on the right side corner.
So in all cases having the below code will help in viewing the modal window always on the right side of screen
<style>
.modal-align-cell{
text-align : right;
}
</style>
One important point here would be if you have this code in UserWorkForm or custom style sheets , then through out the application all the modal windows would be seen on right side. If your requirement is to show only a few modal windows or a specific modal window to the right, I have a suggesstion that would help.
Have this code in a non-auto generated HTML section. Add this section to the main section that is called in the flow action used to launch the modal window. This will make sure you see this right sided window only in the required usecase.
Hope this helps.
Regards,
Priyabharathi
Accenture
IN
Hi Hemant,
Please find below configuration.
In Section on click of a link we are configuring a local action which will load a section.but while launching it is displaying in the middle where as my requirement is to display right half side of the whole screen.
Pegasystems Inc.
IN
Which version of Pega are you using?
In Pega 7 and 8 versions there are settings in the skin rule to customize the modal windows. Below is the screenshot for reference,
You can override the available formats or you can create your own and add the styles as per your requirement.
Hope this helps!
Thanks,
Geeda.
Pegasystems Inc.
US
Geeda, are you sure this would help? I believe Divya is talking about the positioning of a modal window on the screen -"to the right half of the screen" not the dimensions of the modal window itself.
Accenture
IN
Hi Geeda,
We are using 7.1.8 version.I have tried to implement in the skin rule but did not found any option which will display modal dialogue whole right side of the screen.
any help will be appreciated.
Thank you
BPM Company
NL
I guess the only way to do that is to create a custom css (and attach it to your skin rule) where you specify the position of a modal section
Accepted Solution
Goldman Sachs Group Inc
IN
Hi @Divyabharathik
If your modal window is going to hold more space if there are lot of information to be shown, then code below as suggested earlier would help as it will introduce margin-left that would move your modal window to the right side.
.modal-wrapper {
margin-left: 500px;
}
However if the modal window is holding less information and if its small, adding margin-left will move it right side but modal window will end not on the right side corner.
So in all cases having the below code will help in viewing the modal window always on the right side of screen
<style>
.modal-align-cell{
text-align : right;
}
</style>
One important point here would be if you have this code in UserWorkForm or custom style sheets , then through out the application all the modal windows would be seen on right side. If your requirement is to show only a few modal windows or a specific modal window to the right, I have a suggesstion that would help.
Have this code in a non-auto generated HTML section. Add this section to the main section that is called in the flow action used to launch the modal window. This will make sure you see this right sided window only in the required usecase.
Hope this helps.
Regards,
Priyabharathi
Accenture
IN
Thank you for your response. Able to align Right side with the approach you have suggested.
Pegasystems Inc.
IN
Hi,
you can check with the below code . Which should work for responsive i.e for different resolutions of devices .
.modal-wrapper { float:right }