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?

score 16 · Answer 1 · answered Dec 13 '11 at 23:43

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

answered Dec 13 '11 at 23:43

Steven

551
3
7

2

when done resizing/enlarging, when I add new content via html( ) my content is cropped to the height of the previous size... – jedierikb Jan 09 '13 at 21:47

score 4 · Accepted Answer · answered Aug 01 '11 at 13:13

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.

answered Aug 01 '11 at 13:13

pfista

349
1
4
13

score 1 · Answer 3 · answered Aug 27 '14 at 19:05

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

Animate jQuery UI dialog auto resize

3 Answers3

Linked