Autosize jQuery-dialog

Question

I have a jQuery UI dialog that is now set to a specific height:

$(".event").click(function () {
        var id=$(this).attr("data-id");   

        $("<div></div>")

            .addClass("modal-dialog")
            .appendTo("body")

            .dialog({
                close: function() { $(this).remove(); },
                modal: true,
                height: 600,
                width: 700
            })
            .load("/Home/users?xid=" + id);

    });

I would like for my dialog to resize its height depending on the content in it. I tried changing to height: auto but then it would not open at all.

I also found this thread: Automatically resize jQuery UI dialog to the width of the content loaded by ajax But i do not understand how to apply it to my own code.

score 0 · Accepted Answer · answered Oct 30 '14 at 07:17

What i would do is load into a child element, and then set the dialog height to the child's height in the load callback:

$(".event").click(function () {
    var id=$(this).attr("data-id");   

    var dialogElement = $("<div></div>")
        .addClass("modal-dialog")
        .appendTo("body")
        .dialog({
            close: function() { $(this).remove(); },
            modal: true,
            height: 600,
            width: 700
        });
    $("<div></div>").appendTo(dialogElement).load("/Home/users?xid=" + id, function(){
        dialogElement.dialog("height", $(this).height());
    });

});

You might want to actually make it slightly bigger than the child, so that there's room for all the UI.

That was very nice and it worked. Just one thing though. With this code the dialog opens pretty far down on the page. Is there way for me to decide where i want it to be placed? Not enough rep to upvote but thanks a lot! — Wranglerino, Oct 30 '14 at 07:22
http://api.jqueryui.com/dialog/#option-position You can set the position back to the default when you set the height. — Scimonster, Oct 30 '14 at 07:26

Autosize jQuery-dialog

1 Answers1