I have a dialog with a dynamic form inside that can increase the height of the dialog. autoResize
is set to true, width
is 500. Is there any way to animate the dialog resize when more content is added?
Animating dialog size, while staying in the center of the screen
jQuery("#dialog").dialog("widget").animate({
width: '400px',
height: '110px'
}, {
duration: 500,
step: function() {
jQuery("#dialog").dialog('option', 'position', 'center');
}
});
Originally I was using .show('fade')
and the size of the dialog would jump whenever .show
was called. When using the effect .show('fast')
or .show('slow')
, the dialog is resized in a sliding fashion which works for me.
When i was using @Steven's answer i have issues with content size, like @jedierikb said in comment. So i created this code and it works.
$(dialogSel).dialog("widget").animate({
width: 100,
height: 200
}, {
duration: 200,
step: function (now, tween) {
if (tween.prop == "width") {
$(dialogSel).dialog("option", "width", now);
} else {
$(dialogSel).dialog("option", "height", now);
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With