Animate jQuery UI dialog auto resize

Question

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?

Duren

Answer 1

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.

Duren

Answer 2

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');
  }
});

Waac

when done resizing/enlarging, when I add new content via html( ) my content is cropped to the height of the previous size... – Neonatal

Answer 3

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);
        }
    }
});

Birthday