percentage value doesn't work when used with snapOffsetLeft/Top for a R/B snapTo

[claudiobosticco]

Thank you very much for your detailed explanation.

[Isomorphic]

Hi!
Sorry this got missed. No - we don't currently support snapOffsetTop/Left being a percentage.
We do support setting left and top as a simple percentage for children of some parent.
Alternatively you could do your own percent-snap-offset behavior by initially calculating the desired offset as a pixel value, and then observing "resized" on the snap-target and recalculating the value if the size of the target changes

Regards
Isomorphic Software

[claudiobosticco]

Hello Isomorphic could you please comment on this post? Is it valid to use a percentage as snapOffsetTop/Left ?

[claudiobosticco]

SmartClient Version: v12.1p_2021-05-19/AllModules Development Only (built 2021-05-19)

Chrome on MacOS

Hello, please try the snapTo showcase sample, modified like this:

// --------------------------------
// Simple snap to
var commonProps = {
height: 80, width: 80,
align: "center",
border: "1px solid black",
styleName: "exampleTextBlock"
};

// --------------------------------
// Snap to with fixed pixel offsets

isc.Canvas.create({
ID: "offsetContainer",
height: 300, width: 400,
minHeight: 280, minWidth: 280,
border: "1px solid #7e7e7e",
overflow: "hidden",
showHover: true,
prompt: "Snap offsets specified",
canDragResize: true,
peers: [
isc.Label.create({
ID: "label1a",
contents: "Top Left",
backgroundColor: "#FFAAAA",
snapTo: "TL",
snapOffsetTop: 10,
snapOffsetLeft: 10
}, commonProps),

isc.Label.create({
ID: "label2a",
contents: "Top Right",
backgroundColor: "#BEC9FE",
snapTo: "TR",
snapOffsetTop: 10,
snapOffsetLeft: -10
}, commonProps),

isc.Label.create({
ID: "label3a",
contents: "Bottom Left",
backgroundColor: "#D8D5D6",
snapTo: "BL",
snapOffsetLeft: 10,
snapOffsetTop: "-10%"
}, commonProps),

isc.Label.create({
ID: "label4a",
contents: "Left",
backgroundColor: "#CCFFCC",
snapTo: "L",
snapOffsetLeft: 10
}, commonProps),

isc.Label.create({
ID: "label5a",
contents: "Right",
backgroundColor: "#AB5654",
snapTo: "R",
snapOffsetLeft: -10
}, commonProps),

isc.Label.create({
ID: "label6a",
contents: "Bottom",
backgroundColor: "#DCEFEF",
snapTo: "B",
snapOffsetTop: -10
}, commonProps),

isc.Label.create({
ID: "label7a",
contents: "Top",
showHover: true,
prompt: "SnapOffsetTop using percentage",
backgroundColor: "#FFCC99",
snapTo: "T",
snapOffsetTop: 10
}, commonProps),

isc.Label.create({
ID: "label8a",
contents: "Bottom Right",
backgroundColor: "#F8BFFB",
snapTo: "BR",
snapOffsetTop: -10,
snapOffsetLeft: "-10%"
}, commonProps)
]
});

isc.HLayout.create({
ID: "controlLayout",
membersMargin: 20,
height: 800, width: 1000,
members: [
offsetContainer
]
});

as you may see, I'm trying to use a percent value for the snapOffsetLeft (label8a) and snapOffsetTop (label3a), but those labels doesn't show with this settings, I don't know if I'm missing something or if it doesn't work.