Forums

I am having problem changing size of an element that has a wrapping Resize via setStyle call. If I try to change width of the element and then try to resize it, the width goes back to the original width before setStyle call, so set style did not propagate to the wrapping resize.
What is the correct way to resize the resize? (I already have tried reset and it did not work)

The test is below. Click Resize to set width and then click on the top resize handle. The width gets reset back to the original width. The only way to workaround I found is to destroy() resize and recreate it.
Thanks

<script type="text/javascript" src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<input id="resize" type="button" value="Resize" onclick="resizeTest(); return false;" />
<div style="background:#CCC;width:200px;height:200px;position:relative;" id="demo"></div>

<script type="text/javascript">
var Y, resize;

function resizeTest() {
Y.one('#demo').setStyle('width', '300px');
}

YUI().use('resize', function (YUI3) {
Y = YUI3;
resize = new Y.Resize({
node: '#demo',
preserveRatio: true,
wrap: true,
handles: 't'
});
});
</script>

Hmm, does not seem to be very user friendly, I am afraid. Can't you at least introduce properties in Resize to set size manually?
Thanks for the reply.