JQueryUI dialog box position and size

Question

I am trying to create a dialogue using jQueryUI, and I ran into two problems that I did not expect, and did not find a solution that seems to work for me. Using this code:

$( '<div/>' ).load( $this.attr( 'href' ) ).dialog({ height: 'auto', maxWidth: 600, position: 'center', resizable: false, title: $this.attr( 'title' ).length > 0 ? $this.attr( 'title' ) : false, width: 'auto', resize: function( e, ui ) { $(this).dialog( 'option', 'position', 'center' ); } }); 

As a result, I get a dialog that is located in such a way that the upper left corner is in the center of the screen (or near it) and the width of which completely depends on the text that it contains. Is there something obvious that I'm missing? I would very much like the dialogue as a whole to be centered on both axes and the width should not exceed 600 pixels.

Thanks.

Answer 1

Your width: 'auto' is the culprit, I think. In addition, the resize function does not apply to resizing the browser window, namely: resize the dialog itself. Since you set resizable to false , this will not happen.

How about setting a minWidth ?

 $( '<div/>' ).attr('id', 'my-dialog').load( 'hello.html' ).dialog({ height: 'auto', maxWidth: 600, minWidth: 500, position: 'center', resizable: false, title: $this.attr( 'title' ).length > 0 ? $this.attr( 'title' ) : false, }); $(window).resize(function(){ $('#my-dialog').dialog( 'option', 'position', 'center' ); }); 

More details in the documentation: http://api.jquery.com/resize/