Perspective table disable row highlight on click

Ignition
1

Running Ignition version 8.06.

I would like to disable the feature that a row turns blue when clicked on. Our table is configured to open a pop up when a row is clicked, and it is annoying the users that the row remains blue even after the popup is closed (and stays that way until another row is clicked).

I disabled row highlighting on the table and it turned off the mouseover color change, but not the click. We actually liked the mouseover but found that if a table had only one row, that row would remain highlighted after the curser moved off it. The only way to prevent this was to disable mouse over highlighting all together. Not the most desired solution, but better than having the row stuck blue.

Any advise that can be offered would be greatly appreciated!

2

there is a style in light.css which you can change/remove/overwrite

.ia_tableComponent__selection {
 background-color: rgba(12, 123, 179, 0.25);
}

if you dont know how to change the theme.css you can also inject this it into a styleclass’s background-image:
(no need to give the class to any tables btw it will work on all tables just by being in the styleclasses)

image
image963×439 28.5 KB

}.ia_tableComponent__selection { background-color: unset; }{

3

hmmm…your second suggestion works on the test/trial license of ignition I have installed on my local pc (version 8.1.1), but not on the production server (version 8.0.6). I noticed that the style configuration window is slightly different. Version 8.1.1 has an applied styles section, but 8.0.6 does not. I can try upgrading over the weekend and see if it works.

version 8.0.6

image
image984×742 46.1 KB

version 8.1.1

image
image1013×633 35.5 KB

4

Ah if that doesnt work there you could upgrade (seems like a good idea anyways) or use theme.css

5

Do you know how to also disable the cell border?

image

6

You can configure the selection style here:

image

'border: None' will remove the border entirely.

1 Like
7

This will remove keyboard accessibility though, there's a css prop to show it only when using the keyboard... I'll come back when I find it

8

I'm using a table as a list to drag and drop values so I don't need the keyboard. Anyways, knowing how to do it would be nice, thanks.

9

The pseudo-class I was talking about is focus-visible as opposed to focus. focus applies the style to any component that currently has focus, regardless of whether the component needs to show its focused or not. Whereas focus-visible only applies it if the component needs to show the user. (I only just found out about this and haven't actually implemented it anywhere yet..)

Another useful pseudo-class I want to look at is focus-within which can style parent containers if its children have focus

2 Likes