Canvas sizing question

[nick.shrayer.2]

I need the isc.Canvas to auto-size automatically according to it's only visible child.

This works well with layout but does not work as expected with Canvas. Following sample code shows this. Please note how Canvas and Layout react to child (member) show/hide and resize:



var innerCanvas = isc.Canvas.create( { height: 50, width: 50, backgroundColor: "black", overflow: "hidden" } )
var canvas = isc.Canvas.create( { width: 150, height: 1, backgroundColor: "red", children: [innerCanvas ], border: "1px solid black" });

var innerCanvas2 = isc.Canvas.create( { height: 50, width: 50, backgroundColor: "black", overflow: "hidden" } )
var layout = isc.Layout.create( { left: 200, width: 150, height: 1, backgroundColor: "red", members: [innerCanvas2 ], border: "1px solid black" });


var btn1 = isc.Button.create( { title: "Show/Hide", top: 100, click: function() {
if (innerCanvas.isVisible()) innerCanvas.hide(); else innerCanvas.show();
if (innerCanvas2.isVisible()) innerCanvas2.hide(); else innerCanvas2.show();
}
} )

var btn2 = isc.Button.create( { left: 200, title: "Change Size", top: 100, click: function() {
innerCanvas.setHeight(innerCanvas.getHeight()==1 ? 50 : 1)
innerCanvas2.setHeight(innerCanvas2.getHeight()==1 ? 50 : 1)
}
} )


canvas.show()
layout.show()

What is wrong here and how could I achieve Canvas to be auto-sized like a Layout?

[Isomorphic]

Hi Nick
There are 2 things going on here.
Firstly - a canvas with its visibility set to "hidden" still contributes to the scroll-size of its parent (this is related to native browser behavior with CSS).
Layouts have some special logic to ignore the size of hidden members which doesn't exist for simple parent canvases.
The easiest fix for this is probably to clear() rather than hide() the child widget when you want it gone.

Secondly - when the inner canvas is shrunk to be 1px tall, or cleared from the DOM, the Canvas is rendering about 16px tall rather than the specified 1px tall.
This is a result of the fact that the default contents for any canvas is a " " character, which has the height of one line of text.
Try setting contents:"" on the parent canvas to fix this

Regards
Isomorphic Software