Set perspective table checkbox color

Ignition
1

Using Perspective 8.1, I have a table column with ‘render’ set to ‘boolean’, and ‘boolean’ set to ‘checkbox’.

How do I control the color used for the checkbox? I’ve tried setting various ‘styles’ for the column (color, fill, stroke, etc.) but none seem to have an effect.

Thanks.
-Shane

2

In theory you could supply a targeted CSS rule to target only the checkboxes in the table. Something like this in a custom theme should work - but I haven’t tested this exact code:

.ia_tableComponent[data-component="ia.display.table"] .ia_checkbox__checkedIcon {
    color: #00FF00
}
.ia_tableComponent[data-component="ia.display.table"] .ia_checkbox__uncheckedIcon {
    color: #FF0000
}
3

Note that you’ll need to apply that in a theme - you can’t just apply it via props on the table component directly.

4

thank you. that worked.

5

Hi, are there any updates to this? Could the checkbox change color like we can modify the toggle switch?
When toggle is selected, the ‘toggleSwitch’ object appears, but we don’t get this with the CheckBox.
Snag_294fd0b1

6

Broken “theme” link

7

Repaired.

8

And since 8.1.?? (around 20?) this can be added instead into the Advanced Stylesheet (stylesheet.css) via right-clicking on Perspective | Styles | Advanced Stylesheet.
Here I've modified it to use built-in theme colors.

9

On 8.1.28 I have not figured out how to use the stylesheet.css to change the color of the regular checkbox component. The ".ia_tableComponent[data-component="ia.display.table"] .ia_checkbox__checkedIcon" class will update the color for a checkbox inside a table but is not working on the regular component. Anyone else see this? or know a work around?

10

If you check using your browser's development tools you'll see,

.ia_checkbox .ia_checkbox__checkedIcon, .ia_checkbox .ia_checkbox__indeterminateIcon {
    color: var(--checkbox--checked);
}

I think the important bit here is that the color is determined by a CSS var.
Scroll down to the bottom of the style window and you'll find the var definition under :root.

Try adding this to your advanced stylesheet:

:root {
	--checkbox--checked: green;
}

If that works you should be able to figure it out from there.

I'm still figuring out this stuff.

1 Like
11

Nice! thanks for the reply. Worked.