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
I moved this to a new topic as it is technically a different issue with the same symptoms.
1 Like
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.
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.
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.
Could I get the view.json file from the View in which you’re encountering this?
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:
{
"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:
{
"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"
}
}
Okay, @joostjojo, after investigating your Views, this is what I found:
- Your Views don’t even use the
marginproperty, and so I don’t know why you claimed you were encountering this issue. - Your issue stems from the fact that your svg spans 100% of the container AND it uses the
preserveAspectRatioproperty. That property inherently adjusts the location of the svg within its bounds so that it maintains the aspect ratio of the original. By settingpreserveAspectRatioto 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.