Responsive jQuery UI Dialog ( and a fix for maxWidth bug )
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// movemaine@gmail.com$("#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)
Setting maxWidth on create works fine:
$( ".selector" ).dialog({ width: "auto", // maxWidth: 660, // This won't work create: function( event, ui ) { // Set maxWidth $(this).css("maxWidth", "660px"); }});
No need for jQuery or Javascript. CSS solves everything for this.
This is my project solution for a responsive jquery dialog box. Default width and height, then max width and height for as small as the browser shrinks. Then we have flexbox to cause the contents to span the available height.
Fiddle: http://jsfiddle.net/iausallc/y7ja52dq/1/
EDIT
Updated centering technique to support resizing and dragging
.ui-dialog { z-index:1000000000; top: 0; left: 0; margin: auto; position: fixed; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: stretch;}.ui-dialog .ui-dialog-content { flex: 1;}