# Coordinate Container Percent Mode: Button Drifts Off-Center Inside Frame

**URL:** <https://forum.inductiveautomation.com/t/coordinate-container-percent-mode-button-drifts-off-center-inside-frame/86000>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 20, 2024, 10:01am UTC](https://forum.inductiveautomation.com/t/coordinate-container-percent-mode-button-drifts-off-center-inside-frame/86000 "2024-02-20T10:01:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexi\_Andrzejewski](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alexi_andrzejewski/32/65032_2.png) [@Alexi\_Andrzejewski](https://forum.inductiveautomation.com/u/Alexi_Andrzejewski)\
**Post date:** [February 20, 2024, 10:01am UTC](https://forum.inductiveautomation.com/t/coordinate-container-percent-mode-button-drifts-off-center-inside-frame/86000/1 "2024-02-20T10:01:02Z")

</div>

Hello,

I’m facing an issue with component alignment within a **percent mode coordinate container** in **Ignition’s Perspective module**. Let me explain the scenario:

- I have a **frame** (SVG file) with 1.0 x 1.0 dimensions.  
 ![SVG Frame](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/8/c8fc56f7afde3050ab2e77c1d891191578f5fd42.svg)

- I’ve placed **buttons** that should be centered within the frame.

 ![Well centered buttons](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/7/477cb6ef1b478ba6ab0b4abf39393e6519a5ddfd.jpeg)

However, when I resize the container, the buttons becomes **off-center** relative to the frame. I want to maintain perfect alignment regardless of the container size.

 ![Off-centerd buttons](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/9/69de614e7c18fba86f01af2dddfc12c8b84ac0bb.jpeg)

Here is what I tried :

- Changing **props.fit.mode** of the image component
- **Embeding** it in flex containers

**Questions** :

1. How can I ensure that the button stays centered within the frame even when the container size changes?
2. Are there any specific properties or techniques I should use to achieve this?

Any insights or suggestions would be greatly appreciated! Thank you in advance.

---

<div class="post-metadata">

**Author:** ![Alexi\_Andrzejewski](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alexi_andrzejewski/32/65032_2.png) [@Alexi\_Andrzejewski](https://forum.inductiveautomation.com/u/Alexi_Andrzejewski)\
**Post date:** [February 20, 2024, 10:56am UTC](https://forum.inductiveautomation.com/t/coordinate-container-percent-mode-button-drifts-off-center-inside-frame/86000/2 "2024-02-20T10:56:44Z")

</div>

**Update** :

I found a solution for my problem, but it **may not work for all cases**.

By converting my image to PNG, I was able to stretch it and therefore keep the buttons inside their frames.

 ![Centerd Buttons](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b11ccf2317828dae99de605bcc8a6b7b1c793189.jpeg)  
 ![Centerd Buttons](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/5/152bdfea6dc3457ab7860afad85485ac3f06f908.jpeg)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 20, 2024, 11:16am UTC](https://forum.inductiveautomation.com/t/coordinate-container-percent-mode-button-drifts-off-center-inside-frame/86000/3 "2024-02-20T11:16:26Z")

</div>

Tip: There's a **Solution** button below your second post. (Maybe it doesn't appear if the forum detects that you are the original poster?) That's the proper way to mark a question solved - not editing the title.

It's not clear what you're trying to do with the SVG. Why do you need a frame on the buttons when they have borders?

---

<div class="post-metadata">

**Author:** ![Alexi\_Andrzejewski](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alexi_andrzejewski/32/65032_2.png) [@Alexi\_Andrzejewski](https://forum.inductiveautomation.com/u/Alexi_Andrzejewski)\
**Post date:** [February 20, 2024, 12:25pm UTC](https://forum.inductiveautomation.com/t/coordinate-container-percent-mode-button-drifts-off-center-inside-frame/86000/4 "2024-02-20T12:25:11Z")

</div>

I tried to be as general as possible on the post but the reason why I wanted a frame is because I need to split a map in zones and make the zones clickable.  
The map being my svg and the zones being my buttons.