# \[Bug-13329\]Components With Margins Move During Resizing In Coordinate Containers **URL:** \ **Category:** Ignition Early Access\ **Created:** [March 26, 2019, 11:45pm UTC](https://forum.inductiveautomation.com/t/bug-13329-components-with-margins-move-during-resizing-in-coordinate-containers/23650 "2019-03-26T23:45:17Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\ **Post date:** [March 26, 2019, 11:45pm UTC](https://forum.inductiveautomation.com/t/bug-13329-components-with-margins-move-during-resizing-in-coordinate-containers/23650/1 "2019-03-26T23:45:17Z")
I am still seeing the issue on components with a margin configured. Perhaps related to the same issue: when I click and drag to adjust the width of a component with a margin configured, it also adjusts the position of the component ---
**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:** [March 27, 2019, 4:13pm UTC](https://forum.inductiveautomation.com/t/bug-13329-components-with-margins-move-during-resizing-in-coordinate-containers/23650/2 "2019-03-27T16:13:47Z")
I moved this to a new topic as it is technically a different issue with the same symptoms. ---
**Author:** ![seancourtney1](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@seancourtney1](https://forum.inductiveautomation.com/u/seancourtney1)\ **Post date:** [June 18, 2019, 3:35pm UTC](https://forum.inductiveautomation.com/t/bug-13329-components-with-margins-move-during-resizing-in-coordinate-containers/23650/3 "2019-06-18T15:35:09Z")
If a display has padding the arrow keys always move the display down and to the right, it doesn’t matter which arrow key is used. ---
**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:** [February 13, 2020, 5:00pm UTC](https://forum.inductiveautomation.com/t/bug-13329-components-with-margins-move-during-resizing-in-coordinate-containers/23650/4 "2020-02-13T17:00:00Z")
It seems like this issue might have been resolved in the last couple of releases (potentially as far back as 8.0.6). Please let us know if this issue is still encountered on any release going forward. ---
**Author:** ![joostjojo](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@joostjojo](https://forum.inductiveautomation.com/u/joostjojo)\ **Post date:** [March 3, 2020, 12:26pm UTC](https://forum.inductiveautomation.com/t/bug-13329-components-with-margins-move-during-resizing-in-coordinate-containers/23650/5 "2020-03-03T12:26:07Z")
I still have the issue in 8.0.9 I have an svg in a coordinate container. at the borders of the svg i have a few embedded views which i use as template when i resize the screen the embedded views stays on the same place however the svg is getting smaller. So the embedded views aren’t on the right place anymore. I should expect the aspectratio of the coordinate container will be the ratio where all components will get the right sizing from. ---
**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:** [March 3, 2020, 3:23pm UTC](https://forum.inductiveautomation.com/t/bug-13329-components-with-margins-move-during-resizing-in-coordinate-containers/23650/6 "2020-03-03T15:23:15Z")
Could I get the view.json file from the View in which you’re encountering this? ---
**Author:** ![joostjojo](https://avatars.discourse-cdn.com/v4/letter/j/ac91a4/32.png) [@joostjojo](https://forum.inductiveautomation.com/u/joostjojo)\ **Post date:** [March 3, 2020, 3:26pm UTC](https://forum.inductiveautomation.com/t/bug-13329-components-with-margins-move-during-resizing-in-coordinate-containers/23650/7 "2020-03-03T15:26:33Z")
> [@cmallonee](#): > > from the Vi Main view: > { > "custom": {}, > "params": { > "TagPath": "100/Conveyor" > }, > "propConfig": { > "params.TagPath": { > "paramDirection": "input", > "persistent": true > } > }, > "props": { > "defaultSize": { > "height": 768, > "width": 1366 > } > }, > "root": { > "children": [ > { > "meta": { > "name": "CNV Sales HMI" > }, > "position": { > "height": 1, > "width": 1 > }, > "props": { > "elements": [ > { > "d": "m 464.00004,326.35665 v -26.5 h 4 4 v -8 -8 L 345.25,284.02476 c -69.7125,0.0925 -124.05,0.46681 -120.75,0.83189 l 6,0.66378 -7.3091,0.16811 c -4.6577,0.10713 -7.0848,-0.19462 -6.6909,-0.83189 0.4105,-0.66432 -35.823,-1 -107.941,-1 H 0 v -23.5 -23.5 h 16 16 v -94 -94.000002 H 16 0 v -23 -22.9999996 h 108.6069 c 96.1287,0 108.5409,-0.17234 108.0314,-1.5 -0.4827,-1.25797004 0.5892,-1.46949004 6.643,-1.31092004 6.9937,0.1832 7.0394,0.20033 1.4687,0.54991 -3.1625,0.19845 -5.75,0.78836004 -5.75,1.31091004 0,0.59818 120.1962,0.9501 324.50004,0.9501 h 324.5 v 22.9999996 23 h -16.5 -16.5 v 94.000002 94 h 16.5184 16.5185 l -0.2685,23.25 -0.2684,23.25 -167.75,0.25292 -167.75,0.25291 v 7.99709 7.99708 h 3.5 3.5 v 26.5 26.5 h -37.5 -37.5 z m 74,0 v -25.5 h -36.5 -36.5 v 25.5 25.5 h 36.5 36.5 z m -8,-34.5 v -8 h -28 -28 v 8 8 h 28 28 z m -58,-12.5 v -3.5 H 236.5 1 v 3.5 3.5 h 235.5 235.50004 z m 58,0.5 v -3 h -28 -28 v 3 3 h 28 28 z m 337,-0.5 v -3.5 h -167.5 -167.5 v 3.5 3.5 h 167.5 167.5 z m -216.25,-5.24999 c -119.2125,-0.14 -314.28754,-0.14 -433.50004,0 -119.2125,0.14 -21.675,0.25455 216.75004,0.25455 238.425,0 335.9625,-0.11455 216.75,-0.25455 z m 216.25,-2.25001 c 0,-0.66513 -145,-1 -433,-1 C 146,270.85665 1,271.19152 1,271.85665 c 0,0.66513 145,1 433.00004,1 288,0 433,-0.33487 433,-1 z M 15,266.85665 c 0,-0.5641 -2.8334,-1 -6.5,-1 H 2 v -8.95431 -8.95431 L 8.75,247.5982 15.5,247.24837 8.25,247.05251 1,246.85665 v 10.5 10.5 h 7 c 4,0 7,-0.42857 7,-1 z m 22,0 c 0,-0.6 -4,-1 -10,-1 -6,0 -10,0.4 -10,1 0,0.6 4,1 10,1 6,0 10,-0.4 10,-1 z m 792.00004,0 c 0,-0.66498 -132.5,-1 -395.5,-1 -263.00004,0 -395.50004,0.33502 -395.50004,1 0,0.66498 132.5,1 395.50004,1 263,0 395.5,-0.33502 395.5,-1 z m 13,0 c 0,-0.55556 -2.6667,-1 -6,-1 -3.3333,0 -6,0.44444 -6,1 0,0.55556 2.6667,1 6,1 3.3333,0 6,-0.44444 6,-1 z m 25,-9.5 v -10.5 h -5.3533 c -2.9443,0 -8.1193,-0.28911 -11.5,-0.64246 -4.317,-0.45121 -6.1467,-0.30238 -6.1467,0.5 0,0.77301 3.4764,1.20896 10.75,1.3481 l 10.75,0.20563 -8.75,0.3333 -8.75,0.3333 v 7.92213 7.92213 l 8.75,0.3333 8.75,0.3333 -10.75,0.20563 c -14.8323,0.28373 -14.1788,2.20564 0.75,2.20564 h 11.5 z M 20,256.85665 v -8 H 12.5 5 v 8 8 h 7.5 7.5 z m 827.00004,0 v -8 h -413 H 21 v 8 8 h 413.00004 413 z M 36.9166,247.48791 c -0.2291,-0.2028 -4.8041,-0.67995 -10.1666,-1.06033 -6.6381,-0.47086 -9.75,-0.35317 -9.75,0.36873 0,0.67759 3.6698,1.06034 10.1666,1.06034 5.5917,0 9.9792,-0.16593 9.75,-0.36874 z m 594.25194,-0.38125 c -109.0823,-0.14023 -287.28234,-0.14023 -396.00004,1e-5 -108.7177,0.14023 -19.4685,0.25497 198.33154,0.25496 217.8,0 306.7508,-0.11474 197.6685,-0.25497 z m 208.0815,0.0266 c -1.7875,-0.22182 -4.7125,-0.22182 -6.5,0 -1.7875,0.22183 -0.325,0.40333 3.25,0.40333 3.575,0 5.0375,-0.1815 3.25,-0.40333 z m -208.0815,-2.02659 c -109.0823,-0.14023 -287.28234,-0.14023 -396.00004,1e-5 -108.7177,0.14023 -19.4685,0.25497 198.33154,0.25496 217.8,0 306.7508,-0.11474 197.6685,-0.25497 z m 235.8315,-4.25002 v -3 h -433 H 1 v 3 3 h 433.00004 433 z M 43,142.85665 V 48.856648 H 38.5 34 v 94.000002 94 h 4.5 4.5 z m 3,0 c 0,-62.000002 -0.3405,-94.000002 -1,-94.000002 -0.6596,0 -1,32 -1,94.000002 0,62 0.3404,94 1,94 0.6595,0 1,-32 1,-94 z m 9,0 V 48.856648 h -4 -4 v 94.000002 94 h 4 4 z m 1.7497,-47.250002 c -0.1484,-25.9875 -0.2698,-4.725 -0.2698,47.250002 0,51.975 0.1214,73.2375 0.2698,47.25 0.1484,-25.9875 0.1484,-68.5125 0,-94.500002 z M 217,142.85665 V 48.856648 H 137.5 58 v 94.000002 94 h 79.5 79.5 z m 216.00004,0 V 48.856648 H 325.5 218 v 94.000002 94 h 107.5 107.50004 z m 11,0 V 48.856648 h -4 -4 v 94.000002 94 h 4 4 z m 3,0 c 0,-62.000002 -0.3405,-94.000002 -1,-94.000002 -0.6596,0 -1,32 -1,94.000002 0,62 0.3404,94 1,94 0.6595,0 1,-32 1,-94 z m 9,0 V 48.856648 h -4 -4 v 94.000002 94 h 4 4 z m 1.7497,-47.250002 c -0.1484,-25.9875 -0.2698,-4.725 -0.2698,47.250002 0,51.975 0.1214,73.2375 0.2698,47.25 0.1484,-25.9875 0.1484,-68.5125 0,-94.500002 z m 352.2503,47.250002 V 48.856648 h -175.5 -175.5 v 94.000002 94 h 175.5 175.5 z m 11,0 V 48.856648 h -4.5 -4.5 v 94.000002 94 h 4.5 4.5 z m 1.7498,-47.250002 c -0.1484,-25.9875 -0.2699,-4.725 -0.2699,47.250002 0,51.975 0.1215,73.2375 0.2699,47.25 0.1484,-25.9875 0.1484,-68.5125 0,-94.500002 z m 10.2502,47.250002 V 48.856648 h -4.5 -4.5 v 94.000002 94 h 4.5 4.5 z m 34,-98.000002 v -3 h -433 H 1 v 3 3 h 433.00004 433 z m -235.8315,-4.74999 c -109.0823,-0.14023 -287.28234,-0.14023 -396.00004,10e-6 -108.7177,0.14023 -19.4685,0.25497 198.33154,0.25496 217.8,0 306.7508,-0.11474 197.6685,-0.25497 z M 36.9166,38.225388 c 0.2292,-0.20281 -4.1583,-0.36874 -9.75,-0.36874 -6.4968,0 -10.1666,0.38275 -10.1666,1.06034 0,0.7219 3.1119,0.83959 9.75,0.36873 5.3625,-0.38038 9.9375,-0.85753 10.1666,-1.06033 z m 824.73014,0.63126 h 5.3533 v -10.5 -10.5 h -11.5 c -14.9288,0 -15.5823,1.92191 -0.75,2.20564 l 10.75,0.20563 -8.75,0.3333 -8.75,0.3333 v 7.92213 7.92213 l 8.75,0.3333 8.75,0.3333 -10.75,0.20563 c -7.2736,0.13914 -10.75,0.57509 -10.75,1.3481 0,0.80238 1.8297,0.95121 6.1467,0.5 3.3807,-0.35335 8.5557,-0.64246 11.5,-0.64246 z M 8.75,38.115098 2,37.765268 v -8.95431 -8.95431 h 6.5 c 3.6666,0 6.5,-0.4359 6.5,-1 0,-0.57143 -3,-1 -7,-1 H 1 v 10.5 10.5 l 7.25,-0.19586 7.25,-0.19586 z m 622.41854,-0.008 c -109.0823,-0.14023 -287.28234,-0.14023 -396.00004,10e-6 -108.7177,0.14023 -19.4685,0.25497 198.33154,0.25496 217.8,0 306.7508,-0.11474 197.6685,-0.25497 z m 208.0815,0.0266 c -1.7875,-0.22182 -4.7125,-0.22182 -6.5,0 -1.7875,0.22183 -0.325,0.40333 3.25,0.40333 3.575,0 5.0375,-0.1815 3.25,-0.40333 z M 20,28.856648 v -8 H 13 6 v 8 8 h 7 7 z m 827.00004,0 v -8 h -413 H 21 v 8 8 h 413.00004 413 z M 37,18.856648 c 0,-0.6 -4,-1 -10,-1 -6,0 -10,0.4 -10,1 0,0.6 4,1 10,1 6,0 10,-0.4 10,-1 z m 792.00004,0 c 0,-0.66498 -132.5,-1 -395.5,-1 -263.00004,0 -395.50004,0.33502 -395.50004,1 0,0.66498 132.5,1 395.50004,1 263,0 395.5,-0.33502 395.5,-1 z m 13,0 c 0,-0.55556 -2.6667,-1 -6,-1 -3.3333,0 -6,0.44444 -6,1 0,0.55556 2.6667,1 6,1 3.3333,0 6,-0.44444 6,-1 z m 25,-5 c 0,-0.66513 -145,-1 -433,-1 C 146,12.856648 1,13.191518 1,13.856648 c 0,0.66513 145,1 433.00004,1 288,0 433,-0.33487 433,-1 z m -216.25,-2.74999 c -119.2125,-0.14 -314.28754,-0.14 -433.50004,0 -119.2125,0.14 -21.675,0.25455 216.75004,0.25455 238.425,0 335.9625,-0.11455 216.75,-0.25455 z m 216.25,-4.2500096 v -3 h -433 H 1 v 3 3 h 433.00004 433 z", > "fill": { > "paint": "#000000" > }, > "name": "path825", > "style": {}, > "type": "path" > } > ], > "viewBox": "0 0 868.03693 352.85666" > }, > "type": "ia.shapes.svg" > }, > { > "meta": { > "name": "EmbeddedView Motor" > }, > "position": { > "height": 0.0819, > "width": 0.049, > "x": 0.2344, > "y": 0.7246 > }, > "propConfig": { > "props.params.TagPath": { > "binding": { > "config": { > "expression": "{view.params.TagPath} + "/Device"" > }, > "type": "expr" > } > } > }, > "props": { > "path": "Machines/Modules/DRC Motor" > }, > "type": "ia.display.view" > }, > { > "meta": { > "name": "EmbeddedView\_2" > }, > "position": { > "height": 0.0264, > "width": 0.0148, > "x": 0.9807, > "y": 0.7302 > }, > "props": { > "params": { > "Color": "#F00" > }, > "path": "Machines/Modules/Empty Sesnor" > }, > "type": "ia.display.view" > }, > { > "meta": { > "name": "EmbeddedView\_3" > }, > "position": { > "height": 0.0264, > "width": 0.0148, > "x": 0.003, > "y": 0.7302 > }, > "props": { > "params": { > "Color": "#D5D5D5" > }, > "path": "Machines/Modules/Empty Sesnor" > }, > "type": "ia.display.view" > } > ], > "meta": { > "name": "root" > }, > "props": { > "aspectRatio": "16:9", > "mode": "percent", > "style": { > "marginBottom": "5px", > "marginLeft": "5px", > "marginRight": "5px", > "marginTop": "5px", > "overflow": "hidden" > } > }, > "type": "ia.container.coord" > } > } Embedded view 1: ```auto { "custom": {}, "params": { "TagPath": "100/Conveyor/Device" }, "propConfig": { "params.TagPath": { "paramDirection": "input", "persistent": true } }, "props": { "defaultSize": { "height": 40, "width": 40 } }, "root": { "children": [ { "meta": { "name": "Motor" }, "position": { "basis": "20px", "grow": 1 }, "props": { "elements": [ { "elements": [ { "d": "m 46.478716,91.244068 c 35.534145,-0.222108 71.068024,-0.444215 88.834834,1.347207 17.7668,1.791422 17.7668,5.596689 17.7668,9.402195 m 0,0 c 0,24.09777 0,48.19583 0,72.29415 m -101.65937,4.67547 c 31.53928,0 63.07831,0 80.15707,-1.10681 17.07876,-1.10681 19.79934,-3.40651 22.46858,-5.66282 M 31.536223,108.7613 c -0.0037,17.45179 -0.0074,34.90388 -0.01105,52.35626 M 47.346102,91.127879 c -5.257263,1.550995 -10.514286,3.101918 -13.142676,6.65335 -2.628389,3.551431 -2.628389,9.325841 -2.628389,14.988651 m -0.04987,47.67428 c 1.499231,6.17328 2.99839,12.34626 6.263986,15.4326 3.265596,3.08633 8.49929,3.08633 13.631822,3.08633 M 129.71711,113.28301 H 74.156045 v 0 0 0 0 m 55.561065,15.23016 H 74.156045 v 0 0 m 55.561065,14.46866 H 74.156045 v 0 0 0 0 m 10e-7,13.89752 c 55.561064,0 55.561064,0 55.561064,0 m 0,0 z m -55.906164,0 z M 129.71711,90.818517 v 88.144573 m -74.023902,0 v -88.144573 0 z", "fill": { "paint": "none" }, "name": "path893", "stroke": { "dasharray": "none", "linecap": "butt", "miterlimit": "4", "opacity": "1", "paint": "#D5D5D5", "width": "6.17900181" }, "style": {}, "transform": "matrix(1.0952664,0,0,0.99270417,-15.641757,0.84705075)", "type": "path" } ], "name": "layer1", "transform": "translate(-15.502879,-88.206353)", "type": "group" } ], "viewBox": "0 0 139.90385 93.369179" }, "type": "ia.shapes.svg" } ], "events": { "dom": { "onClick": { "config": { "script": "\tid \u003d \u0027a\u0027\n\ttitle \u003d \"DRC Motor\"\n\tview \u003d \u0027Pop-ups/Module Settings\u0027\n\tposition \u003d {\u0027top\u0027:event.pageY,\u0027left\u0027:event.pageX}\n\tsystem.perspective.openPopup(id\u003did,view\u003dview,position\u003dposition,title\u003dtitle,modal\u003dTrue)\n" }, "scope": "G", "type": "script" } } }, "meta": { "name": "root" }, "props": { "direction": "column", "style": { "classes": "HoverModule" } }, "type": "ia.container.flex" } } ``` Embedded view 2: ```auto { "custom": {}, "params": { "Color": "#F00" }, "propConfig": { "params.Color": { "paramDirection": "input", "persistent": true } }, "props": { "defaultSize": { "height": 20, "width": 20 } }, "root": { "children": [ { "meta": { "name": "Light" }, "position": { "basis": "20px" }, "propConfig": { "props.elements[0].elements[0].fill.paint": { "binding": { "config": { "path": "view.params.Color" }, "type": "property" } } }, "props": { "elements": [ { "elements": [ { "cx": "15.341816", "cy": "16.073212", "fill": { "opacity": "1" }, "name": "path815", "r": "14.046785", "stroke": { "dasharray": "none", "dashoffset": "0", "miterlimit": "4", "opacity": "1", "paint": "#000000", "width": "1.90642929" }, "style": { "opacity": "1" }, "type": "circle" } ], "name": "layer1", "transform": "translate(-0.34181595,-1.0732117)", "type": "group" } ], "viewBox": "0 0 30 30" }, "type": "ia.shapes.svg" } ], "meta": { "name": "root" }, "props": { "direction": "column", "style": { "classes": "HoverModule" } }, "type": "ia.container.flex" } } ``` ---
**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:** [March 4, 2020, 4:26pm UTC](https://forum.inductiveautomation.com/t/bug-13329-components-with-margins-move-during-resizing-in-coordinate-containers/23650/8 "2020-03-04T16:26:47Z")
Okay, @joostjojo, after investigating your Views, this is what I found: 1. Your Views don’t even use the `margin` property, and so I don’t know why you claimed you were encountering this issue. 2. Your issue stems from the fact that your svg spans 100% of the container AND it uses the `preserveAspectRatio` property. That property inherently adjusts the location of the svg within its bounds so that it maintains the aspect ratio of the original. By setting `preserveAspectRatio` to a value of “none” and then adjusting the location (and size) of the svg to how it had appeared originally, I was able to resize the View without the svg changing position.