[BUG-3225] Transform CSS properties not working on components in coordinate containers

Ignition Early Access
1

Hi,
I think it is best to describe this problem in action as shown below. I create two icons, one put in flex and one in XY coordinate container. Both assign the same class from the global perspective CSS file called HVAC-button.
The one in the flex work as it should be but the one in XY coordinate doesn’t work with hover transform property. It only accepts cursor and filter property.

s

2

Have you tried deleting the position.rotate property?

3

Yes but it didn’t work.

4

Huh… It looks like the position.rotate property gets recreated after deleting it.

It works if you disable this transform from the developer tools.

image
image1207×122 13.7 KB

Adding !important in your theme file should work to override that

.psc-hvac-button {
	cursor: pointer;
	filter: drop-shadow(1px 1px 2px black);
	transform: scale(1) rotate(20deg) !important;
	transition: 1s;
}

.psc-hvac-button:hover {
	transform: scale(1) rotate(180deg) !important;
	filter: drop-shadow(1px 1px 5px black);
}
2 Likes
5

What if you tried to set position.rotate to unset?

6

Doesn’t work
In previous version I just bind rotation to null and it works but in 8.1 this change and we have to use ! important

7

It seems like we’re adding the [data-component="ia.container.coord"] > *[data-component] class out of order here. The cascade should flow from default component styles → style classes → inline styles (component props). Here I’m seeing the default styles being added after style classes for the coordinate container. I’ll open a ticket for investigation and a fix.

3 Likes