Responsive jQuery UI Dialog ( and a fix for maxWid

Question

With many sites leveraging jQuery UI, there are some major shortcomings that have to be overcome because jQuery UI does not support responsive design and there's a longstanding bug when maxWidth is used in conjunction with width:'auto'.

So the question remains, how to make jQuery UI Dialog responsive?

Answer 1

I am not sure that my simple solution solves the problem of this question, but it works for what I am trying to do:

$('#dialog').dialog(
{
    autoOpen: true,
    width: Math.min(400, $(window).width() * .8),
    modal: true,
    draggable: true,
    resizable: false,
});

That is, the dialog opens with a 400px width, unless the width of the window requires a smaller width.

Not responsive in the sense that if the width is narrowed the dialog shrinks, but responsive in the sense that on a specific device, the dialog will not be too wide.

Answer 2

I just found a solution for this issue.

I pasted my css style, hope this can help someone

.ui-dialog{
  position: fixed;

  left: 0 !important;
  right: 0 !important;

  padding: rem-calc(15);
  border: 1px solid #d3dbe2;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  max-width: rem-calc(620);
  top: rem-calc(100) !important;

  margin: 0 auto;
  width: calc(100% - 20px) !important;
}

Answer 3

Below is how I achieved a responsive jQuery UI Dialog.

To do this, I added a new option to the config - fluid: true, which says to make the dialog responsive.

I then catch the resize and dialog open events, to change the max-width of the dialog on the fly, and reposition the dialog.

You can see it in action here: http://codepen.io/jasonday/pen/amlqz

Please review and post any edits or improvements.

// Demo: http://codepen.io/jasonday/pen/amlqz
// [e-mail]

$("#content").dialog({
    width: 'auto', // overcomes width:'auto' and maxWidth bug
    maxWidth: 600,
    height: 'auto',
    modal: true,
    fluid: true, //new option
    resizable: false
});


// on window resize run function
$(window).resize(function () {
    fluidDialog();
});

// catch dialog if opened within a viewport smaller than the dialog width
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
    fluidDialog();
});

function fluidDialog() {
    var $visible = $(".ui-dialog:visible");
    // each open dialog
    $visible.each(function () {
        var $this = $(this);
        var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
        // if fluid option == true
        if (dialog.options.fluid) {
            var wWidth = $(window).width();
            // check window width against dialog width
            if (wWidth < (parseInt(dialog.options.maxWidth) + 50))  {
                // keep dialog from filling entire screen
                $this.css("max-width", "90%");
            } else {
                // fix maxWidth bug
                $this.css("max-width", dialog.options.maxWidth + "px");
            }
            //reposition dialog
            dialog.option("position", dialog.options.position);
        }
    });

}

EDIT

Updated approach: https://github.com/jasonday/jQuery-UI-Dialog-extended

The repository above also includes options for:

• Click outside of dialog to close
• Hide title bar
• hide close button
• responsive (to address above)
• scale width & height for responsive (ex: 80% of window width)

Answer 4

If your site is restricted to a max size, then below approach will work. Attach a css style to your dialog.

.alert{
    margin: 0 auto;
    max-width: 840px;
    min-width: 250px;
    width: 80% !important;
    left: 0 !important;
    right: 0 !important;
}

$('#divDialog').dialog({
    autoOpen: false,
    draggable: true,
    resizable: true,
    dialogClass: "alert",
    modal: true
});

Answer 5

The accepted solution is rather buggy and overengineered imo. I came up with dialogResize which is cleaner and more straightforward for my purposes.

Implement like so:

$("#dialog").dialogResize({
  width: 600,
  height: 400,
  autoOpen: true,
  modal: true
});

Demo

Answer 6

$("#content").dialog({
    width: 'auto',
    create: function (event, ui) {
        // Set max-width
        $(this).parent().css("maxWidth", "600px");
    }
});

This Worked for me