Dialog Autoresize Bug

Dialog Autoresize Bug

I have an application that uses a lot of dialogs to display forms etc. Works really well but I have one recurring issue with all the dialogs throughout the application. The dialog needs to auto resize to fit the content which changes based on user selection. This also works perfectly. However if the dialog is dragged then the auto resize functionality stops working which results in some of the content being hidden if content like extra form fields for example is added.

I have tried turning off the animation, and the position, and I tried setting draggable and resizeable to false and then applying them to the dialog after it is initialised. None of these made any difference. Anybody any idea why this is happening?

Here is my code

  1. // Open the dialog. $('<div id="load_detail_Div"></div>').dialog({ title: 'Load '+loadID, width: 'auto', height: 'auto', hide: 'slide', show: 'slide', modal: true, stack: true, draggable: true, resizable: true, position: { my: 'left top', at: 'left+50 top+50' }, open: function(event, ui) { // Close the dialog if user clicks anywhere outside it. jQuery('.ui-widget-overlay').bind('click',function(){ jQuery('#load_detail_Div').dialog('close'); }); $.ajax({ url: rootPath+"operations/detail/loadsDetail", data:{ _token: $('meta[name="_orchid_token"]').attr('content'), loadID: loadID }, type: 'post', success: function(data){ // Put the html returned by the Ajax call into the correct div. $('#load_detail_Div').html(data); } }); }, beforeClose: function( event, ui ) { checkLoadsGrid(); }, close: function (event, ui) { // When the dialog is closed empty the div. $('#load_detail_Div').html(''); $('#load_detail_Div').remove(); } });