Responsive jQuery UI Dialog ( and a fix for maxWidth bug )

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

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 // [email protected]  $("#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)