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
// [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)
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;
}
Fiddle: http://jsfiddle.net/iausallc/y7ja52dq/6/
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");
}
});