Question

I have a jqueryui dialog defined with maxWidth.

$("#myDialog").dialog({
        autoOpen: false,
        width: 'auto',
        maxWidth: 1000,
        height: 'auto',
        position: [250, 50],
        close: function() {
            $("#myViewer").empty();
            someStuff();
        }
    });

The maxWidth works as intended when I resize the form with the resize handle. But the form contains tabs (that turn out on two rows) and other stuff which tries to occupy all of the given space.

When I open the form it hits the right browser edge. As I move the window with the mouse to the left, the dialog is automatically resized as there are more space available to the right.
However, it doesn’t stop at maxWidth.

If i grab the resize handle when larger than maxWidth, it resizes back to maxWidth.

Also, the titlebar of the dialog isn’t the width of the dialog until it’s resized by either changing the viewport size or using the resize handle.

Here’s a sample: http://jsfiddle.net/CarlR/PvE3P/22/

I hope the description is clear enough. You can try it out on the jsfiddle. The problem is when the dialog is shown the first time.
(I’m using google chrome btw)

Answer 1

Here is a jsfiddle of what I think you are looking for http://jsfiddle.net/PvE3P/41/. I tied into the $(window).resize() and dynamically update the dialog width depending on the window width. I hope this helps!

EDIT:

I’ve update the jsfiddle to work a little more seamlessly. http://jsfiddle.net/PvE3P/42/