Hacer que JQuery UI Dialog crezca o se reduzca automáticamente para ajustarse a su contenido

Tengo una ventana emergente de diálogo JQuery UI que muestra un formulario. Al seleccionar ciertas opciones en el formulario, aparecerán nuevas opciones que harán que crezca más. Esto puede conducir a un escenario en el que la página principal tiene una barra de desplazamiento y el cuadro de diálogo JQuery UI tiene una barra de desplazamiento. Este escenario de dos barras de desplazamiento es antiestético y confuso para el usuario.

¿Cómo puedo hacer que el cuadro de diálogo JQuery UI crezca (y posiblemente se reduzca) para que siempre se ajuste a su contenido sin mostrar una barra de desplazamiento? Preferiría que solo una barra de desplazamiento en la página principal sea visible.

Actualización: a partir de jQuery UI 1.8, la solución de trabajo (como se menciona en el segundo comentario) es usar:

width: 'auto'

Use la opción autoResize: true. Ilustraré:

  <div id="whatup">
    <div id="inside">Hi there.</div>
  </div>
   <script>
     $('#whatup').dialog(
      "resize", "auto"
     );
     $('#whatup').dialog();
     setTimeout(function() {
        $('#inside').append("Hello!<br>");
        setTimeout(arguments.callee, 1000);
      }, 1000);
   </script>

Aquí hay un ejemplo de trabajo: http://jsbin.com/ubowa

La respuesta es establecer el

autoResize:true 

propiedad al crear el diálogo. Para que esto funcione, no puede establecer ninguna altura para el diálogo. Entonces, si establece una altura fija en píxeles para el cuadro de diálogo en su método de creación o mediante cualquier estilo, la propiedad autoResize no funcionará.

Esto funciona con jQuery UI v1.10.3

$("selector").dialog({height:'auto', width:'auto'});

Usé la siguiente propiedad que funciona bien para mí:

$('#selector').dialog({
     minHeight: 'auto'
});

La altura es compatible con auto.

Ancho no lo es!

Para hacer algún tipo de auto, obtenga el tamaño del div que está mostrando y luego configure la ventana con.

En el código C # ..

TheDiv.Style["width"] = "200px";

    private void setWindowSize(int width, int height)
    {
        string widthScript =    "$('.dialogDiv').dialog('option', 'width', "    +   width   +");";
        string heightScript =   "$('.dialogDiv').dialog('option', 'height', "   +   height  + ");";

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
            "scriptDOWINDOWSIZE",
            "<script type='text/javascript'>"
            + widthScript
            + heightScript +
            "</script>", false);
    }

Si necesita que funcione en IE7, no puede usar la opción no documentada, con errores y sin soporte {'width':'auto'} . En su lugar, agregue lo siguiente a su .dialog():

'open': function(){ $(this).dialog('option', 'width', this.scrollWidth) }

Si .scrollWidthincluye el relleno del lado derecho depende del navegador (Firefox difiere de Chrome), por lo que puede agregar un número subjetivo "suficientemente bueno" de píxeles para.scrollWidth o reemplazarlo con su propia función de cálculo de ancho.

Es posible que desee incluir width: 0entre sus .dialog()opciones, ya que este método nunca disminuirá el ancho, solo lo aumentará.

Probado para trabajar en IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 y Opera 22.

var w = $('#dialogText').text().length;

$("#dialog").dialog('option', 'width', (w * 10));

Hice lo que necesitaba hacer para cambiar el tamaño del ancho del diálogo.