Published on November 22, 2019 - 1:37am
Last updated December 9, 2019 - 5:30am
Question
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***
Comments
Keep up to date on this post and subscribe to comments
November 22, 2019 - 1:53am
Can you please share the configuration details ? How its implemented on UI
- reply
November 28, 2019 - 1:27am
Response to hemantm5026
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.
- reply
November 28, 2019 - 1:32am
Response to hemantm5026
any help will be appreciated.
Thank you
- reply
Pega
November 22, 2019 - 8:53am
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.
- reply
Pega
November 22, 2019 - 11:08am
Response to GeedA
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.
- reply
November 28, 2019 - 1:32am
Response to GeedA
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
- reply
November 28, 2019 - 2:46am
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
- reply
November 28, 2019 - 2:53am
Response to vaspoz
it should be something like:
.modal-wrapper {
margin-left: 500px; //maybe with !important
}
- reply
Pega
December 1, 2019 - 8:58pm
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
- reply
December 9, 2019 - 5:30am
Response to Priyabharathi
Thank you for your response. Able to align Right side with the approach you have suggested.
- reply
Pega
December 2, 2019 - 6:52am
Hi,
you can check with the below code . Which should work for responsive i.e for different resolutions of devices .
.modal-wrapper { float:right }
- reply
