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

**URL:** <https://forum.inductiveautomation.com/t/bug-3225-transform-css-properties-not-working-on-components-in-coordinate-containers/48468>\
**Category:** Ignition Early Access\
**Created:** [July 2, 2021, 4:22pm UTC](https://forum.inductiveautomation.com/t/bug-3225-transform-css-properties-not-working-on-components-in-coordinate-containers/48468 "2021-07-02T16:22:30Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [July 2, 2021, 4:22pm UTC](https://forum.inductiveautomation.com/t/bug-3225-transform-css-properties-not-working-on-components-in-coordinate-containers/48468/1 "2021-07-02T16:22:30Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/f/ffbc7990b64bd5e73919fbc7ae3c23edf7bb3cb9.gif)

---

<div class="post-metadata">

**Author:** ![schenk](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@schenk](https://forum.inductiveautomation.com/u/schenk)\
**Post date:** [July 2, 2021, 11:08pm UTC](https://forum.inductiveautomation.com/t/bug-3225-transform-css-properties-not-working-on-components-in-coordinate-containers/48468/2 "2021-07-02T23:08:37Z")

</div>

Have you tried deleting the `position.rotate` property?

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [July 3, 2021, 3:22pm UTC](https://forum.inductiveautomation.com/t/bug-3225-transform-css-properties-not-working-on-components-in-coordinate-containers/48468/3 "2021-07-03T15:22:25Z")

</div>

Yes but it didn’t work.

---

<div class="post-metadata">

**Author:** ![schenk](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@schenk](https://forum.inductiveautomation.com/u/schenk)\
**Post date:** [July 3, 2021, 6:27pm UTC](https://forum.inductiveautomation.com/t/bug-3225-transform-css-properties-not-working-on-components-in-coordinate-containers/48468/4 "2021-07-03T18:27:46Z")

</div>

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

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

```auto
.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);
}

```

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 4, 2021, 12:59am UTC](https://forum.inductiveautomation.com/t/bug-3225-transform-css-properties-not-working-on-components-in-coordinate-containers/48468/5 "2021-07-04T00:59:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [July 4, 2021, 2:23am UTC](https://forum.inductiveautomation.com/t/bug-3225-transform-css-properties-not-working-on-components-in-coordinate-containers/48468/6 "2021-07-04T02:23:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ray](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ray/32/11451_2.png) [@ray](https://forum.inductiveautomation.com/u/ray)\
**Post date:** [July 9, 2021, 4:45pm UTC](https://forum.inductiveautomation.com/t/bug-3225-transform-css-properties-not-working-on-components-in-coordinate-containers/48468/7 "2021-07-09T16:45:12Z")

</div>

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.