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

[Kristoffer Mon1]

The reason why I mentioned removing the boostrap.min.css is that your Service Portal already has a boostrap style sheet. sp-bootstrap. 

bootstrap.min.css does not appear to be out of box. Keep it in there adds unnecessary bloat to your Service Portal. Please also keep in mind that the Service Portal was built on the bootstrap framework already.

Overriding the style would probably fix it, but it's a bandaid and not addressing the problem/fact that you have two bootstrap style sheets trying to do the same thing competing. 

Best of luck.

[Manish Vinayak1]

My bad, I assumed even the out of the box CSS had the same definition for .modal-dialog class.

Kristoffer is right here, if there is additional bootstrap stylesheet, probably remove that. My solution is helpful in cases where you want to override the out of the box sp-bootstrap CSS which you can't remove.

[Oleg]

You use wrong classes for modal template. You should use modal-header, modal-body and modal-footer classes instead of panel-heading, panel-body and panel-footer. The outer div with panel class should removed additionally. The outer divs (div.modal, div.modal-dialog and div.modal-content) will be created by $uibModal. So the template should consist from only the inner of modal-content. See here, for example, for more details.

By the way, modal-dialog class uses CSS rule margin: 30px auto; with margin-left and margin-right set to "auto". It centers the dialog horizontally.

Alternatively I'd recommend you to consider to use spModal, which uses $uibModal internally. It will simplify your code.

[Omkar Mone]

Hi 

Can you try going through this bootstrap modal?

https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Regards,

Omkar.