# System.gui.transform inside nested templates

**URL:** <https://forum.inductiveautomation.com/t/system-gui-transform-inside-nested-templates/45753>\
**Category:** Ignition\
**Created:** [April 19, 2021, 2:29pm UTC](https://forum.inductiveautomation.com/t/system-gui-transform-inside-nested-templates/45753 "2021-04-19T14:29:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kissamcorrina](https://avatars.discourse-cdn.com/v4/letter/k/ba9def/32.png) [@kissamcorrina](https://forum.inductiveautomation.com/u/kissamcorrina)\
**Post date:** [April 19, 2021, 2:29pm UTC](https://forum.inductiveautomation.com/t/system-gui-transform-inside-nested-templates/45753/1 "2021-04-19T14:29:59Z")

</div>

I am having difficulty getting a component to resize and adjust how I want it to. I have a template inside a template that displays a graph with a moving target line. I’m using system.gui.transform to resize the components and move them. This feels like a relatively simple thing to do. It works fine in the designer, but not in the client.

Run chart template with relative sizing, not maintaining aspect ratio on all 3 components and layout enabled:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/a/1a4d0b58782167130ab7a344bc55ad0477d31cfa.png)

Card template with layout enabled:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/a/1a7e188197142a739f8d5a5390fc6455c7a73b05.png)

Client (the bottom of the chart won’t appear):  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6d2c86d8b73e06253595bdfca973c7a63e88a4af.png)

The propertyChange script on the run chart template:

```auto
if event.propertyName == "targetRunTime":
	runTime = event.source.runTime
	targetRunTime = event.source.targetRunTime
	totalRunTime = event.source.totalRunTime
	if runTime and targetRunTime and totalRunTime:		
		runHeight = event.source.height * (runTime / totalRunTime)
		runY = event.source.height - runHeight	
		system.gui.transform(event.source.getComponent('Run Time'), newY = runY, newHeight = runHeight, coordSpace = 1)
		
		targetHeight = event.source.height * (targetRunTime / totalRunTime)
		targetY = event.source.height - targetHeight
		system.gui.transform(event.source.getComponent('Label'), newY = targetY, newHeight = targetHeight, coordSpace = 1)

```

Anyone have any ideas? I know the x & y coordinates I’m pulling are relative to the template, so I could change that, but it really looks like the height is the issue here because when the bar chart is full the bottom portion is still blank. I’ve tried different layouts (relative, anchored) and different coordinate space, but it won’t resize.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [October 6, 2023, 7:51am UTC](https://forum.inductiveautomation.com/t/system-gui-transform-inside-nested-templates/45753/2 "2023-10-06T07:51:20Z")

</div>

For anybody that stumbles onto this old cold case, I'm working on the same problem here:

> [@How to transform a component inside of a vision template](https://forum.inductiveautomation.com/t/how-to-transform-a-component-inside-of-a-vision-template/80122):
>
> I have a button in a template, and I want to resize it to a perfect square at runtime regardless of how the template has been sized. To develop this, I have a Multi-State button inside a test template, and a test button that is in the same container as the template: [image] My desired result is this: button @ (x = 100, y = 100, width = 100, height = 100) [image] The obvious approach is this: # Retrieve the button from the template button = event.source.parent.getComponent('testTemplate').…