# Perspective alarm status table checkbox sze

**URL:** <https://forum.inductiveautomation.com/t/perspective-alarm-status-table-checkbox-sze/68017>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [December 28, 2022, 8:56am UTC](https://forum.inductiveautomation.com/t/perspective-alarm-status-table-checkbox-sze/68017 "2022-12-28T08:56:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Richard\_Giske](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richard_giske/32/41906_2.png) [@Richard\_Giske](https://forum.inductiveautomation.com/u/Richard_Giske)\
**Post date:** [December 28, 2022, 8:56am UTC](https://forum.inductiveautomation.com/t/perspective-alarm-status-table-checkbox-sze/68017/1 "2022-12-28T08:56:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [December 28, 2022, 11:49am UTC](https://forum.inductiveautomation.com/t/perspective-alarm-status-table-checkbox-sze/68017/2 "2022-12-28T11:49:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Richard\_Giske](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richard_giske/32/41906_2.png) [@Richard\_Giske](https://forum.inductiveautomation.com/u/Richard_Giske)\
**Post date:** [December 29, 2022, 11:13am UTC](https://forum.inductiveautomation.com/t/perspective-alarm-status-table-checkbox-sze/68017/3 "2022-12-29T11:13:19Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/0/5076dee32bb23078751b4ffa26c90ff29e9101b3.png)

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.

 ![bilde](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/d/4d26bfc373c3ed7cdf985498f7576438bce4eeba.png)

So any idea where I'm going wrong?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [December 29, 2022, 11:30am UTC](https://forum.inductiveautomation.com/t/perspective-alarm-status-table-checkbox-sze/68017/4 "2022-12-29T11:30:04Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Richard\_Giske](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richard_giske/32/41906_2.png) [@Richard\_Giske](https://forum.inductiveautomation.com/u/Richard_Giske)\
**Post date:** [December 29, 2022, 11:38am UTC](https://forum.inductiveautomation.com/t/perspective-alarm-status-table-checkbox-sze/68017/5 "2022-12-29T11:38:21Z")

</div>

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

Does it work on your end?

![bilde](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/2/32a60edbe8290e86298853265acf15c48734aeeb.png)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [December 29, 2022, 11:40am UTC](https://forum.inductiveautomation.com/t/perspective-alarm-status-table-checkbox-sze/68017/6 "2022-12-29T11:40:19Z")

</div>

> [@Richard\_Giske](#):
>
> Does it work on your end?

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

---

<div class="post-metadata">

**Author:** ![Richard\_Giske](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richard_giske/32/41906_2.png) [@Richard\_Giske](https://forum.inductiveautomation.com/u/Richard_Giske)\
**Post date:** [December 29, 2022, 11:52am UTC](https://forum.inductiveautomation.com/t/perspective-alarm-status-table-checkbox-sze/68017/7 "2022-12-29T11:52:38Z")

</div>

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