Perspective alarm status table checkbox sze

Is there any way to increase the size of the checkbox of the alarm status table in perspective?
Only found older posts regarding this issue and none with a solution.

Client requests bigger buttons as the operators are complaining about the button beeing to small when used on the phone.

Try this: on the Alarm Status Table add style.backgroundImage and set the value to
} .checkbox_uncheckedIcon{font-size: 3.5rem;} {

This is CSS injection. You can generally figure some of this out using your browser's Developer Tools. Hit F12 in your browser and use the select button (top left) to select the item you're interested in modifying. You can then play with the style settings to get the effect you desire. In this case it's ia_checkbox_uncheckedIcon. The ia_ is added by Ignition to avoid clashes with styles from other sources so it is omitted in our backgroundImage CSS.

1 Like

I think this could work, but I cannot seem to get it working.

I've not added CSS injection before, so here's what I did:
I added a style.backgroundImage and set the values as you suggested.
bilde

Still nothing happening with the checkbox sizes.
I went into the devtools and found the parameter there, and sure enough it works changing it there.

So any idea where I'm going wrong?

You omitted the closing and opening braces, } <injected css> {.

} .checkbox_uncheckedIcon{font-size: 3.5rem;} {

1 Like

Tried that as well, nothing changed @Transistor
Same size of the checkboxes.

Does it work on your end?

bilde

Yes, but only in the browser - not in Designer.

Got it working, copied and pasted the entire rule from the devtools, all boxes now show the size i want.
In all sense, it looks pretty much identical as to yours, except it also uses the ia_ prefix ?

.ia_checkbox__checkedIcon, .ia_checkbox__uncheckedIcon, .ia_checkbox__indeterminateIcon {
width: 1em;
height: 1em;
display: inline-block;
font-size: 1.5rem;
user-select: none;
flex-shrink: 0;
}

Made a new style and used that as a style on the alarm status component and it then works in the designer as well.
Thanks for the help @Transistor

1 Like