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!

Wylma

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.

Regain

If I am not mistaken, minWidth/minHeight/etc limit user resizing, not grow/shrink according to content. Per the site: MinWidth: The minimum width to which the dialog can be resized, in pixels. Am I understanding that correctly? – Vitrics

Answer 2

Min/Max just control the minimum you can resize it. If you want to set it to a certain height use height/width. Also might want to pass the method name 'option' to your dialog() call.

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

Mineralogy

Answer 3

Use it like this:

$('#'+popupid).dialog({ width:400, height:300, maxWidth: 800, maxHeight: 500, minWidth: 300, minHeight: 200 });

Lamplighter

Answer 4

Simple answer

$( "#info" ).dialog({
  draggable: false,
  autoOpen: false,
  resizable: false,
  width: '40%',
  height: 450,
  modal: true 
});

$( ".info" ).click(function( event ) {
  $( "#info" ).dialog( "open" );
  $( ".ui-dialog").css({'min-width': '350px'});
  event.preventDefault();
});

Daedalus

Answer 5

Just use CSS!

.ui-widget-content {
min-width: 360px;
}

Or

min-width: 25%;

Douce