Regarding now-modal

Shailja Chhilla
ServiceNow Employee

hello I am trying to change the css of now-modal's dialog , let say want to change the border radius, 
changing it like .now-modal-dialog{ border-radius: 8px !important }
but cannot see the changes being reflected.

3 REPLIES 3

Not applicable

Hi @Shailja Chhilla ,

To solve this issue, you actually need to give the style border-radius: 50px; or any other arbitrary number to your #MyPicLarge .modal-header too. then you don't need to have CSS !important property. Something like this:

#MyPicLarge .modal-header {
    border-radius: 10px 10px 0 0;
}

Pay attention that we're not gonna set the value for the lower left and right corners. We're gonna set them when styling .modal-footer. Something like this:

#MyPicLarge .modal-footer {
    border-radius: 0 0 10px 10px;
}

This is besides having the border-radius style for your #MyPicLarge .modal-content.

Then you can see that all of your 4 corners will be round in Bootstrap 3 Modals.

Just keep in mind that the border-radius value for .modal-content must be equal to the border-radius value of .modal-header and .modal-footer. For example if you choose 10px, then don't change the number for the other one to cover the corners for you perfectly.

 

Shailja Chhilla
ServiceNow Employee

Sorry but what is #MyPicLarge , this is not working , actually i have this now-modal in my seismic component and i need to change the css there @Community Alums 

Not applicable

Just put  .now-modal-dialog{ border-radius: 8px } @Shailja Chhilla