JQuery ui dialog resize after open

Question

I have a JQuery dialog that I use to show a message to the user. The dialog have 2 buttons: "Ok" and "Details". The idea is to show a user friendly message when the dialog opens and when the user clicks the "Details" button I want to show the user friendly message plus a more detailed message under the user friendly message. The "Details" button uses the toggle function to show/hide the detailed message.

The dialog is defined like this:

function showNewDocumentDialog(dialogTitle, dialogMessage, dialogDetailMessage) {
            var dialog$ = $('#dialogId');
            var dialogDetail$ = $('#dialogDetailId')
            var showDetailContent = false;            

            dialog$.dialog({
                autoOpen: false,
                title: dialogTitle,
                modal: true,
                width: 'auto',
                height: 'auto',
                zIndex: 39000,
                open: function (type, data) {
                    $('#dialogContentId').text(dialogMessage);
                    $('#dialogDetailContentId').text(dialogDetailMessage);
                    $(this).parent().appendTo($('form:first'));

                },
                buttons: [
                                {
                                    text: "Ok",
                                    click: function () { $(this).dialog("close"); }
                                },
                                {
                                    text: "Details",
                                    click: function () {
                                        dialogDetail$.toggle(showDetailContent);
                                        showDetailContent = !showDetailContent;
                                    }
                                }
                            ]
            });

            if (dialogDetailMessage == '') {
                $(":button:contains('Details)").attr("disabled", "disabled").addClass('ui-state-disabled');
            }
            dialog$.dialog('open');
        }
    </script>   
    <div id="dialogId" title="Title" style="display: none">        
        <p id="dialogContentId">Content</p>
        <div id="dialogDetailId" style="display: none">
            <p id="dialogDetailContentId">DetailContent</p>        
        </div>
    </div>

How can I resize the dialog to fit both the user friendly message and the detailed message when the user clicks on the "Details" button? And shrink the dialog size again when the user clicks on the "Details" button to hide the detailed message?

Answer 1

try to resize the overlay on details button click as follows by getting the width of the div which is made dailog

var width = $("selector").width();
var height = $("selector").height();

    if (width > 450) {
        $(".ui-widget-content").css("width", width);

    }
 if (height > 450) {
        $(".ui-widget-content").css("height", height);

    }

    $("#dvNotesPopup").dialog('option', 'position', 'center'); 
}