# View Canvas - precisely place center of embedded view?

**URL:** <https://forum.inductiveautomation.com/t/view-canvas-precisely-place-center-of-embedded-view/91036>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 28, 2024, 8:26pm UTC](https://forum.inductiveautomation.com/t/view-canvas-precisely-place-center-of-embedded-view/91036 "2024-05-28T20:26:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![msteele](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/msteele/32/77889_2.png) [@msteele](https://forum.inductiveautomation.com/u/msteele)\
**Post date:** [May 28, 2024, 8:26pm UTC](https://forum.inductiveautomation.com/t/view-canvas-precisely-place-center-of-embedded-view/91036/1 "2024-05-28T20:26:40Z")

</div>

I'm building process diagrams with embedded views as items in a view canvas where content must be dynamic or at least indirected at runtime, but then a SVG canvas for items that are persistent. Both the view canvas and embedded SVG are in a coordinate container in percentage mode, located at 0,0 and with dimensions of 100%,100%.

In my view canvas instances, I am able to absolutely position an embedded view to percentages, such as top: `55%, left: 57.75%, width: 19%, height: 19` with default view width and height set to false. But this is still a bit messy and imprecise.

On the frontend when building these diagrams in Figma, we can precisely position the Figma component (embedded view equivalent) based on the horizontal and vertical centerline. Is there any way to do something similar with placement on a view canvas?

---

<div class="post-metadata">

**Author:** ![msteele](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/msteele/32/77889_2.png) [@msteele](https://forum.inductiveautomation.com/u/msteele)\
**Post date:** [June 18, 2024, 2:44pm UTC](https://forum.inductiveautomation.com/t/view-canvas-precisely-place-center-of-embedded-view/91036/2 "2024-06-18T14:44:20Z")

</div>

Yes, it can be done with a style, `transform: translate(X,Y)`:

> [@Embedded views vs view canvas: clipping css translated transforms](https://forum.inductiveautomation.com/t/embedded-views-vs-view-canvas-clipping-css-translated-transforms/91988/2):
>
> More forum sleuthing makes me think it's a manifestation of bug [IGN-9406] as described by @cmallonee here [[IGN-9406] Scroll-bar/Overflow Frustrations on Perspective View Canvas - #9 by cmallonee](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/9)

Yes, it requires overriding `overflow: visible` inside a stylesheet due to this bug:

> [@\[IGN-9406\] Scroll-bar/Overflow Frustrations on Perspective View Canvas](https://forum.inductiveautomation.com/t/ign-9406-scroll-bar-overflow-frustrations-on-perspective-view-canvas/86998/9):
>
> Ah, I see the issue now. Bad news: Yep, it appears to be a bug, in that we're applying ViewCanvas.props.instances[X].style.overflow to the container which is the root of the instanced View instead of properly applying that overflow to the wrapping \<div\>. Good news: I have a one-off workaround. Apply a domId property to the META category of your ViewCanvas, and supply some unique value ("MyViewCanvas" in the upcoming example). Now modify your stylesheet a bit: div#MyViewCanvas \> div { overf…

No, I'm not sure it's worth it. I may just define the offset from 0,0 to the center of my icon inside documentation and can adjust position on instantiation.