Question

I’m trying to create a dialog using jQueryUI and I’m running into 2 issues that I didn’t expect and haven’t found 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' );
  }
});

I end up with a dialog that’s positioned such that the upper left corner is at the center of the screen (or thereabouts) and whose width seems wholly dependent on the text it contains. Is there something obvious that I’m missing? I’d really like for the dialog as a whole to be center aligned on both axes and for the width to not exceed 600px.

Thanks.

Answer 1

Your width: 'auto' is the culprit, I think. Also, the resize function doesn’t apply to whether the browser window resizes, that was just if you resize the dialog itself. Since you set resizable to false, that won’t happen.

How about setting a minWidth as well?

$( '<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 in the documentation: http://api.jquery.com/resize/