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-27 18:08:11Z

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, 2012 at 18:08

answered Mar 26, 2012 at 21:08

J. Celestino

3723 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

1110 Over a year ago

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)

J. Celestino Over a year ago

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.

1110 Over a year ago

I have updated question. I must do something wrong because it doesn't resize :(

J. Celestino Over a year ago

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.

1110 Over a year ago

Wired I debug this function it gets value on resize but dialog stay the same :/

|

ElSniffer · Accepted Answer · 2014-07-17 10:21:24Z

0

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

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

answered Jul 17, 2014 at 10:21

ElSniffer

112 bronze badges

1 Comment

Cristian Diaconescu Over a year ago

That doesn't work. "Uncaught Error: no such method 'resize' for dialog widget instance"

Community · Accepted Answer · 2017-05-23 12:34:01Z

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Apr 22, 2015 at 16:31

bkwdesign

2,1892 gold badges34 silver badges59 bronze badges

Collectives™ on Stack Overflow

How to resize jquery ui dialog with browser

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related