I am experiencing an issue with a jqueryui dialog that I have defined with a maxWidth setting.
$("#myDialog").dialog({
autoOpen: false,
width: 'auto',
maxWidth: 1000,
height: 'auto',
position: [250, 50],
close: function() {
$("#myViewer").empty();
someStuff();
}
});
While the maxWidth setting works correctly when I resize the form using the handle, there seems to be an issue with tabs and other elements attempting to take up all available space within the dialog.
When I open the form, it extends to the right edge of the browser. As I move the window left, the dialog automatically resizes to fit the additional space on the right.
However, it does not adhere to the maxWidth limit.
If I try to manually resize the dialog beyond the maxWidth limit using the handle, it snaps back to the maximum width.
In addition, the titlebar of the dialog is not the correct width until the dialog is resized by adjusting the viewport or using the resize handle.
To see an example, visit: http://jsfiddle.net/CarlR/PvE3P/22/
I hope this explanation clarifies the issue. Feel free to test it out on the jsfiddle provided. The problem occurs when the dialog is initially displayed.
(I am using Google Chrome as my browser)