How to resize jquery ui dialog with browser

Question

I open jquery ui dialog and load some content in it. But when I resize browser jq dialog doesn't change it's width/height. I have tried a few thing but no luck. Here how I open it:

$(document).ready(function () {
    var wWidth = $(window).width();
            var dWidth = wWidth * 0.9;
            var wHeight = $(window).height();
            var dHeight = wHeight * 0.9;

            $(".openDialog").live("click", function (e) {
                e.preventDefault();
                $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true,
                        resizable: false,
                        show: 'fade',
                        width: dWidth,
                        height: dHeight,                    
                        create: function (event, ui) {
                            $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").css("display", "none");

                            $(this).parents(".ui-dialog").css("padding", 0);
                            $(this).parents(".ui-dialog").css("border", 0);
                            $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("padding", 0);

                            $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("background", "#000000");
                            $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("overflow", "hidden");

                        }  

                    })
                    .load(this.href);
            });
$(window).resize(function () {
            var wWidth = $(window).width();
            var dWidth = wWidth * 0.9;
            var wHeight = $(window).height();
            var dHeight = wHeight * 0.9;
            $(".openDialog").dialog("option", "width", dWidth);
            $(".openDialog").dialog("option", "height", dHeight);
        });
});

J. Celestino · Accepted Answer · 2012-03-27T18:08:11.703

11

After the dialog has been opened the width and height are static unless resized. Bind an event to the window resize that will change it instead.

$(window).resize(function() {
    var wWidth = $(window).width();
    var dWidth = wWidth * 0.9;
    var wHeight = $(window).height();
    var dHeight = wHeight * 0.9;
    $("#data-dialog-id").dialog("option", "width", dWidth);
    $("#data-dialog-id").dialog("option", "height", dHeight);
});

edited Mar 27 '12 at 18:08

answered Mar 26 '12 at 21:08

J. Celestino

372
2
8

I put whole my function for loading ui dialog in resize function that you provided. And I get dialog resized on browser resize but then I ui dialog is not modal it's displayed as a page and I get error: Uncaught ReferenceError: $ is not defined (anonymous function) – 1110 Mar 26 '12 at 21:34
I would leave them as two separate functions. That way the resize isn't messing with the dialog's init. Just put the window resize function after your code in the document ready function. – J. Celestino Mar 27 '12 at 15:00
I have updated question. I must do something wrong because it doesn't resize :( – 1110 Mar 27 '12 at 16:00
I updated the function above. the dialog was actually attached to a new div element you are creating not openDialog. I should have read a little closer. Whatever you end up calling that new div is what you need in the resize function. – J. Celestino Mar 27 '12 at 18:11
Wired I debug this function it gets value on resize but dialog stay the same :/ – 1110 Mar 27 '12 at 20:36
And when I set width/height to 'auto' it resize good but dialog is not centered anymore... – 1110 Mar 27 '12 at 20:48
You should also add the following line to ensure the dialog stays in the center of the screen: $("#data-dialog-id").dialog("option", "position", "center"); – zdenekca Jun 20 '14 at 02:55

score 0 · Answer 2 · answered Jul 17 '14 at 10:21

0

I think that if you trigger the event resize off the dialog it should do it.

$( ".selector" ).dialog( "resize");

answered Jul 17 '14 at 10:21

ElSniffer

11
2

That doesn't work. "Uncaught Error: no such method 'resize' for dialog widget instance" – Cristian Diaconescu Nov 20 '14 at 16:33

score 0 · Answer 3 · edited May 23 '17 at 12:34

0

It appears @jasonday has a nice script that amends the JQuery UI dialog functionality - seems to be working fairly well for me.

Here's his SO answer

Here's his script on github: jQuery-UI-Dialog-extended

edited May 23 '17 at 12:34

Community

1
1

answered Apr 22 '15 at 16:31

bkwdesign

1,953
2
28
50

How to resize jquery ui dialog with browser

3 Answers3