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

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/