SnapTo functionality

[acarur01]

I have some UI that "requires" the snapTo functionality but I am stuck with one issue - whenever I add the peer to be shown, the rest of the layout gets shifted. Is there any way to have the peer just show on top of whatever is already in place? Kind of like the rollOverCanvas on the listgrid.

Run the sample and click on the button - you'll notice the button shift to the right.

// --------------------------------
// Simple snap to

isc.Canvas.create({
    ID:"snapContainer", 
    height: 300, width: 400,
    minHeight:280, minWidth:280,
    showEdges:true,
    edgeImage:"edges/custom/sharpframe_10.png",
    edgeSize:10,
    edgeMarginSize:10,
    overflow:"hidden",
    canDragResize: true
});
 isc.Label.create({
            ID:"label1", 
            height: 80, width: 80,
            contents: "Top Left",
            align: "center",
            backgroundColor: "#FFAAAA",
            border: "1px solid black",
            snapTo:"TR",visibility:"hidden",
            snapOffsetLeft: 80
        });

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


 isc.Button.create({ID:"test", left: 400, title:"TESTING POSITION",click: function(){snapContainer.addPeer(label1);label1.bringToFront();}})
]});

[Isomorphic]

You've got the snapContainer and button adjacent in an HLayout, so the HLayout is (correctly) placing them side-by-side.

If you actually wanted occlusion to occur, you probably wouldn't want this component to be either a child or peer, both of which would be occluded if by the "snapContainer"'s parent if it was overflow:"hidden" or "auto".

[acarur01]

I had no doubt it was working correctly - my question was how to "show on top of whatever is already in place? Kind of like the rollOverCanvas on the listgrid.". All you did was list out what I should not be doing which doesn't really help :)

Ok. Take off as peer, then what? How do I show it right beside the snapContainer everytime it is visible?

[Isomorphic]

Not a child or peer, so just an ordinary parentless widget. This is the only way to avoid it being clipped, which is probably what you want in this case (we're assuming this is some kind of floating palette or hover notification or similar).

In this case, if the floating widget is intended to show and hide with the widget that creates it, you'll need to observe visibilityChanged.