Automatically resize jQuery UI dialog to the width of the content loaded by ajax

Posted by womp on Stack Overflow See other posts from Stack Overflow or by womp
Published on 2010-02-09T18:26:27Z Indexed on 2010/05/03 12:18 UTC
Read the original article Hit count: 424

I'm having a lot of trouble finding specific information and examples on this. I've got a number of jQuery UI dialogs in my application attached to divs that are loaded with .ajax() calls. They all use the same setup call:

 $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });

I just want to have the dialog resize to the width of the content that gets loaded. Right now, the width just stays at 300px (the default) and I get a horizontal scrollbar.

As far as I can tell, "autoResize" is no longer an option for dialogs, and nothing happens when I specify it.

I'm trying to not write a separate function for each dialog, so .dialog("option", "width", "500") is not really an option, as each dialog is going to have a different width.

Specifying width: 'auto' for the dialog options just makes the dialogs take up 100% of the width of the browser window.

What are my options? I'm using jQuery 1.4.1 with jQuery UI 1.8rc1. It seems like this should be something that is really easy.

EDIT: I've implemented a kludgy workaround for this, but I'm still looking for a better solution.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui