Faça o JQuery UI Dialog aumentar ou diminuir automaticamente para se ajustar ao seu conteúdo

Eu tenho um pop-up de diálogo da interface do usuário do JQuery que exibe um formulário. Ao selecionar certas opções no formulário, novas opções aparecerão no formulário, fazendo com que ele fique mais alto. Isso pode levar a um cenário em que a página principal possui uma barra de rolagem e a caixa de diálogo JQuery UI possui uma barra de rolagem. Esse cenário de duas barras de rolagem é desagradável e confuso para o usuário.

Como posso fazer com que a caixa de diálogo JQuery UI cresça (e possivelmente encolha) para sempre ajustar seu conteúdo sem mostrar uma barra de rolagem? Eu preferiria que apenas uma barra de rolagem na página principal esteja visível.

Atualização: A partir da jQuery UI 1.8, a solução de trabalho (conforme mencionado no segundo comentário) é usar:

width: 'auto'

Use a opção autoResize: true. Vou 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>

Aqui está um exemplo de trabalho: http://jsbin.com/ubowa

A resposta é definir o

autoResize:true 

propriedade ao criar a caixa de diálogo. Para que isso funcione, você não pode definir nenhuma altura para a caixa de diálogo. Portanto, se você definir uma altura fixa em pixels para a caixa de diálogo em seu método criador ou através de qualquer estilo, a propriedade autoResize não funcionará.

Isso funciona com a jQuery UI v1.10.3

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

Eu usei a seguinte propriedade que funciona bem para mim:

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

A altura é suportada para automático.

Largura não é!

Para fazer algum tipo de auto, obtenha o tamanho da div que você está mostrando e defina a janela com.

No 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);
    }

Se você precisar que ele funcione no IE7, não poderá usar a opção não documentada, com erros e sem suporte {'width':'auto'} . Em vez disso, adicione o seguinte ao seu .dialog():

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

A .scrollWidthinclusão do preenchimento do lado direito depende do navegador (o Firefox difere do Chrome); portanto, você pode adicionar um número subjetivo de pixels "bons o suficiente" .scrollWidthou substituí-lo por sua própria função de cálculo de largura.

Você pode incluir width: 0entre suas .dialog()opções, pois esse método nunca diminuirá a largura, apenas aumentará.

Testado para funcionar no IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 e Opera 22.

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

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

fiz o que eu precisava para redimensionar a largura da caixa de diálogo.