6

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?

3 Answers 3

16

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');
  }
});
1
  • 2
    when done resizing/enlarging, when I add new content via html( ) my content is cropped to the height of the previous size...
    – jedierikb
    Commented Jan 9, 2013 at 21:47
4

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.

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.