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***


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

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.


November 28, 2019 - 1:32am
Response to hemantm5026

any help will be appreciated.

Thank you

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!



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.

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

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

November 28, 2019 - 2:53am
Response to vaspoz

it should be something like:

.modal-wrapper {

  margin-left: 500px;  //maybe with !important


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 

  text-align : right;

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.



December 9, 2019 - 5:30am
Response to Priyabharathi

Hi @Priyabharathi 

Thank you for your response. Able to align Right side with the approach you have suggested.




December 2, 2019 - 6:52am


you can check with the below code . Which should work for responsive i.e for different resolutions of devices .

.modal-wrapper { float:right }