Hello.
I've created a modal using spModal.open as shown in the image below:
The modal was created like this:
spModal.open({
title: "Delete Achievement",
widget: 'aac3df15874d6510c20a84c30cbb3573',
widgetInput: { recordSysId: real },
size: 'sm',
buttons: [
{ label: '${Cancelar}', cancel: true },
{ label: '${Confirmar}', primary: true }
]
})I would like to know if it is possible to apply specific CSS to those buttons and how to do that.
I've found another post that asks the same thing, but the given solution didn't work in my case. At least I couldn't make it work.
https://www.servicenow.com/community/developer-forum/how-to-style-spmodal-buttons/m-p/1784636
Hi @Ricardo Natalin,
As the post above mentions, you need to inspect the button element in order to see the css class attached to it.
Next, you need to apply the new styling to the found css class in the CSS part of your widget.
Here's an example using the OOB Create Incident catalog item.
1. Inspect the button element.
- Right click on your element > Inspect. This will open the developer window.
2. Locate the css class associated to each button.
3. Leverage those css classes to apply the new styling.
// applies to both buttons
.btn {
padding: 1rem 1.2rem;
font-size: 2rem;
}
// applies to the Cancel button
.btn-default {
color: blue;
border-color: blue;
}
// applies to the Leave button
.btn-primary {
background-color: blue;
border-color: blue;
}
The (exaggerated for effect) result:
Hope this helps,
Dana
