Regarding now-modal

Shailja Chhilla
ServiceNow Employee
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

Community Alums
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
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 

Community Alums
Not applicable

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