could not set jquery ui dialog min-width

Question

I have been trying to use jquery ui dialog. But I m not able to set the minimum width and height. Here is my code

 var options={
                modal: true,
                title:headertext,
                minHeight:125,
                minWidth:520,
                maxWidth:1000,
                maxHeight:1000,
                dialogClass:"sfFormwrapper"};
            $('#'+popupid ).dialog(options);

But in the browser it is rendered as

height:auto ; width:520px

Thanks!

Answer 1

You seem to be under the impression that the minWidth, minHeight, maxWidth and maxHeight options map directly to min-width, min-height, max-width and max-height CSS style rules, respectively. That's not actually the case.

The style rules in your question come from the widget element itself (the root of the tree, exposing the ui-dialog class). Note that the minWidth option translates to a width rule, which is actually dynamic: it's managed by the widget and will change as you resize the dialog.

In the same way, the original element augmented by the dialog widget has dynamic width, height and min-height rules applied.

As you can see in this fiddle if you use the layout view of your browser's development tools, the widget does ensure that the total size of the dialog box (borders and title bar included) remains within the bounds you specified.