# Component Positioning Issue - Coordinate Container

**URL:** <https://forum.inductiveautomation.com/t/component-positioning-issue-coordinate-container/88114>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [March 30, 2024, 10:16pm UTC](https://forum.inductiveautomation.com/t/component-positioning-issue-coordinate-container/88114 "2024-03-30T22:16:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdia](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdia/32/87599_2.png) [@mdia](https://forum.inductiveautomation.com/u/mdia)\
**Post date:** [March 30, 2024, 10:16pm UTC](https://forum.inductiveautomation.com/t/component-positioning-issue-coordinate-container/88114/1 "2024-03-30T22:16:09Z")

</div>

I am having an issue with maintaining the position of a label component within a coordinate container set to percent mode when screen sizes change.

**Setup:**

- I have an SVG component representing an oil rig, which includes several valves that I want to make interactive for control purposes.
- Since the SVG is a single grouped component, I cannot assign events to individual parts of it. My workaround was to place a blank label component over the valves I want to be clickable.

**The Issue:**

- This works well initially; however, when the screen size changes or when I embed this view into another view with different scaling (e.g., a flex container), the label doesn't stay aligned with the underlying valve in the SVG.
- I need the label to maintain its position relative to the SVG component so that it continues to function as a click target for the valves no matter the screen size.

I've attached a short video to illustrate the issue clearly. Has anyone else faced a similar problem or does anyone have suggestions for a solution?

![scaling issue](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/8/584011aff7ca6beb0fcfc1036cbc9b44abb8dfab.gif)

---

<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:** [March 30, 2024, 11:24pm UTC](https://forum.inductiveautomation.com/t/component-positioning-issue-coordinate-container/88114/2 "2024-03-30T23:24:12Z")

</div>

You will need to constrain the aspect ratio as well to the ratio of the view. You can use a binding on aspect ratio to concat the ~~page's~~ view's default "{width}:{height}"

---

<div class="post-metadata">

**Author:** ![mdia](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdia/32/87599_2.png) [@mdia](https://forum.inductiveautomation.com/u/mdia)\
**Post date:** [March 31, 2024, 2:36am UTC](https://forum.inductiveautomation.com/t/component-positioning-issue-coordinate-container/88114/3 "2024-03-31T02:36:18Z")

</div>

Not sure I understand. So I would do the following expression binding

> {page.props.dimensions.viewport.width} + ':' + {page.props.dimensions.viewport.height}

on the root container's aspect ratio property?

FYI i tried that and it didn't work.

---

<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:** [April 2, 2024, 3:15am UTC](https://forum.inductiveautomation.com/t/component-positioning-issue-coordinate-container/88114/4 "2024-04-02T03:15:14Z")

</div>

Oops, sorry, I was only on my phone, I should have said the **view's default** size:  
This is the binding:

```auto
{
  "type": "expr",
  "config": {
    "expression": "{view.props.defaultSize.width} + \u0027:\u0027 + {view.props.defaultSize.height}"
  }
}

```