How to center a popup modal in servicenow portal?

[Raphael Dizon]

Hello,

Any idea on how to center my modal pop up? When my browser is maximized the pop up is located at the right side

But when I minimize my browser to a certain width, it is completely fine and centered.

Kind Regards,

Raphael

[Raphael Dizon · Accepted solution]

Hello, 

I think I found the reason why the modal is appearing on the right side. I tried to uncheck the 'left:50%' in modal-dialog and i set the left to 0% and it is now appearing at the center

[Kristoffer Mon1]

Since you've narrowed it down to the style and media-query, you'll notice it's part of the bootstrap.min.css style sheet; which will be difficult to edit if it's truly minified. I would check to see if removing bootstrap.min.css from that Service Portal, to see if this solves your issue.

You can also try editing the minified file, which is possible; just need to format the styles.

[Raphael Dizon]

Thank you so much! 🙂

[Manish Vinayak1]

I would advise to try overriding the CSS rather than removing the bootstrap file; as removing it might affect the styling of other components.

Try adding the following in the widget CSS / the page CSS:

.modal-dialog {

left:0% !important;

}

[Raphael Dizon]

Thanks for this, I haven't removed yet the bootstrap file so I had the same solution as yours. Is this the better practice as opposed to removing the bs file?