Automatically resize jQuery UI dialog to the width of the content loaded by ajax
- by womp
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.