# Perspective XY container percent mode doesn't scale/position objects correctly

**URL:** <https://forum.inductiveautomation.com/t/perspective-xy-container-percent-mode-doesnt-scale-position-objects-correctly/34371>\
**Category:** Ignition Early Access\
**Created:** [May 2, 2020, 7:44am UTC](https://forum.inductiveautomation.com/t/perspective-xy-container-percent-mode-doesnt-scale-position-objects-correctly/34371 "2020-05-02T07:44:40Z")\
**Posts on this page:** 9\
**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:** [May 2, 2020, 7:44am UTC](https://forum.inductiveautomation.com/t/perspective-xy-container-percent-mode-doesnt-scale-position-objects-correctly/34371/1 "2020-05-02T07:44:40Z")

</div>

Hello  
I try to draw some simple P&ID diagram in XY container with percent mode but as it shown in following, the object position calculate incorrectly.  
I believe it is because the perspective calculate ans scale from top right corner of object instead of center.

 ![scale](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/934719e4b39b4a1336b88ccfc37dabe94185bd26.gif)

Is there any trick to fix this problem?  
Or is there any plan to fix this issue?

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [May 2, 2020, 11:46am UTC](https://forum.inductiveautomation.com/t/perspective-xy-container-percent-mode-doesnt-scale-position-objects-correctly/34371/2 "2020-05-02T11:46:47Z")

</div>

What happens when you design it on a large canvas, then scale it down?

---

<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:** [May 2, 2020, 12:13pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-container-percent-mode-doesnt-scale-position-objects-correctly/34371/3 "2020-05-02T12:13:37Z")

</div>

Same as shown in gif.  
For mobile I redesign a new page . But for desktop I need my drawing scale like vision between monitor range from 1600_900 to 1920_1080.

---

<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:** [May 2, 2020, 2:57pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-container-percent-mode-doesnt-scale-position-objects-correctly/34371/4 "2020-05-02T14:57:12Z")

</div>

They merge together when scale down and separating when scale up

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [May 2, 2020, 3:54pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-container-percent-mode-doesnt-scale-position-objects-correctly/34371/5 "2020-05-02T15:54:37Z")

</div>

I looks to me that the problem is related to the individual objects maintaining their aspect ratio. They would need to be allowed to distort to work in a pure percent-mode scaling in that container. You need another _enclosing_ container to scale maintaining _its_ aspect ratio, then the inner contents can scale without separating.

I don’t think this qualifies as a bug.

---

<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:** [May 3, 2020, 12:37am UTC](https://forum.inductiveautomation.com/t/perspective-xy-container-percent-mode-doesnt-scale-position-objects-correctly/34371/6 "2020-05-03T00:37:59Z")

</div>

If you put in another container you will see similar problem.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [May 4, 2020, 3:59pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-container-percent-mode-doesnt-scale-position-objects-correctly/34371/7 "2020-05-04T15:59:45Z")

</div>

(this response is assuming you have brought these over from Symbol Factory, which it appears you have)

As @pturmel suggested, the problem you’re encountering is that the individual pieces a re attempting to preserve their aspect ratio, which means that they well position themselves and scale according to the setting you have selected for them which by default is `xMidYMid`. This setting will preserve the aspect ratio of the symbol while using the smaller restrictive boundary as the “max” and the center of the component (mid/mid) as the center of the symbol.

In your video example, if you want the pieces to all remain connected while the screen size changes, you will need to set `props.preserveAspectRatio` to a value of `none`. The trade-off in removing the preservation of aspect ratio to maintain positional relevance is that the symbols will begin to stretch.

 ![Screen Shot 2020-05-04 at 8.58.44 AM](https://us1.discourse-cdn.com/inductiveautomation/original/2X/1/13e9e9ea4dc85128456693132b4fef639532f537.png) ![Screen Shot 2020-05-04 at 8.58.57 AM](https://us1.discourse-cdn.com/inductiveautomation/original/2X/6/6a9e687acfde3e4616dfa282db11c371cd425305.png) ![Screen Shot 2020-05-04 at 8.59.10 AM](https://us1.discourse-cdn.com/inductiveautomation/original/2X/2/2ef68842232773f545d2b890ee87fe8a3af50ef6.png)

The “gaps” between my symbols are due to rounding differences while having symbols directly at one another’s edge. You should consider a bit of overlap to avoid these rounding errors.

---

<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:** [May 4, 2020, 7:36pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-container-percent-mode-doesnt-scale-position-objects-correctly/34371/8 "2020-05-04T19:36:53Z")

</div>

Is there any way to achieve same result like vision relative mode with maintain aspect ratio check on?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [May 5, 2020, 2:35pm UTC](https://forum.inductiveautomation.com/t/perspective-xy-container-percent-mode-doesnt-scale-position-objects-correctly/34371/9 "2020-05-05T14:35:46Z")

</div>

Not with the current Symbols in Containers methodology. We have some major improvements to how users would complete this sort of View coming up in the near future, but it’s still wrapping up the design phase. Until the improvement is in place, I can’t think of a way to get symbols to stretch/scale as a View changes dimensions while also maintaining their aspect ratio.
