# Get component size before layout applied

**URL:** <https://forum.inductiveautomation.com/t/get-component-size-before-layout-applied/37025>\
**Category:** Ignition\
**Tags:** vision, ignition79, scripting\
**Created:** [July 24, 2020, 12:27am UTC](https://forum.inductiveautomation.com/t/get-component-size-before-layout-applied/37025 "2020-07-24T00:27:50Z")\
**Posts on this page:** 5\
**Page:** 1

<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 24, 2020, 12:27am UTC](https://forum.inductiveautomation.com/t/get-component-size-before-layout-applied/37025/1 "2020-07-24T00:27:50Z")

</div>

Is there any way to get the size of a component before layout is applied (e.g. as in a client) in scripting?  
I have a fly-in panel using `system.gui.transform` however at the moment I have to hardcode the x coordinates to move it to to move in in and out of the (right side of the) page. I’m using designer coordinates, as I can’t use runtime with right-side fly-ins due to the layout system (left side works ok).

To make it dynamic code instead, I want to get the width of the component and the width of the container its in, and use that instead. However these need to use designer widths, not client/layout-applied widths… Can I get this?

```auto
if event.propertyName == 'ShowConfig':
	objWidth = event.source.width ## this is the layout-applied width, need to replace with the designer width
	cntWidth = event.source.parent.width ## this is the layout-applied width, need to replace with the designer width
	newX = cntWidth #### Doesn't work as not designer-width
	newX = 1361 

	# if we want to show it, move it into the screen from the right
	if event.newValue:
		newX -= objWidth ####
		newX = 921
		event.source.visible = 1
	else: event.source.visible = 1
	
	system.gui.transform(event.source
						,newX = newX
						,duration=75
						,acceleration=4
						,coordSpace=system.gui.COORD_DESIGNER)

```

---

<div class="post-metadata">

**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\
**Post date:** [July 24, 2020, 2:46am UTC](https://forum.inductiveautomation.com/t/get-component-size-before-layout-applied/37025/2 "2020-07-24T02:46:24Z")

</div>

This code in a rectangle’s mouse released event

```auto
widthConfig = event.source.relWidth
widthRuntime = event.source.getSize().getWidth()
system.gui.messageBox(str(widthRuntime), str(widthConfig))

```

gives results like this when clicked in a resized client:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/7/d7b445d6999af4167468286be4b484edd18f24c9.png)

---

<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 24, 2020, 3:41am UTC](https://forum.inductiveautomation.com/t/get-component-size-before-layout-applied/37025/3 "2020-07-24T03:41:15Z")

</div>

I assume that `relWidth` is a custom property you added and set manually? The manual part is what I want to avoid; if I change the width of the fly-out panel, I don’t want to rely on remembering to also update the new width in the parameter / code (it’s also neater not to have to hardcode things)

---

<div class="post-metadata">

**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\
**Post date:** [July 24, 2020, 4:28am UTC](https://forum.inductiveautomation.com/t/get-component-size-before-layout-applied/37025/4 "2020-07-24T04:28:17Z")

</div>

> [@nminchin](#):
>
> I assume that `relWidth` is a custom property you added and set manually?

No, it's the scripting name of the "Width" property on components that show one, like a rectangle:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/b/6bce6082afb3228d9acaf38bab0f35d3800ef738.png)  
Nothing is manually set for the code I posted to work. I don't know offhand if there's a way to get a similar property on components that don't have "Width" listed in their properties, but figure you could likely use a transparent rectangle or other shape with this property in your container, etc. (use absolute layout to keep it stretched to extents) to get what you need--if you don't already have a suitable rectangle to get this from as part of your design.

---

<div class="post-metadata">

**Author:** ![cjafi](https://avatars.discourse-cdn.com/v4/letter/c/bbce88/32.png) [@cjafi](https://forum.inductiveautomation.com/u/cjafi)\
**Post date:** [October 4, 2023, 9:14pm UTC](https://forum.inductiveautomation.com/t/get-component-size-before-layout-applied/37025/5 "2023-10-04T21:14:46Z")

</div>

I've been trying to do the same and stumbled upon this which so far gives what I need.

```auto
from com.inductiveautomation.factorypmi.application.components.util import FPMILayout
component = event.source
design = FPMILayout.getPreferredBounds(component)
print design.width, design.height, design.x, design.y

```