Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animate jQuery UI dialog auto resize

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?

like image 841
pfista Avatar asked Jul 29 '11 15:07

pfista


3 Answers

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');
  }
});
like image 77
Steven Avatar answered Nov 07 '22 05:11

Steven


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.

like image 21
pfista Avatar answered Nov 07 '22 06:11

pfista


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);
        }
    }
});
like image 1
Gh61 Avatar answered Nov 07 '22 05:11

Gh61