Fai in modo che la finestra dell'interfaccia utente di JQuery cresca o si riduca automaticamente per adattarsi al suo contenuto

Ho una finestra di dialogo dell'interfaccia utente di JQuery che visualizza un modulo. Selezionando alcune opzioni sul modulo, nel modulo verranno visualizzate nuove opzioni che lo rendono più alto. Questo può portare a uno scenario in cui la pagina principale ha una barra di scorrimento e la finestra di dialogo dell'interfaccia utente di JQuery ha una barra di scorrimento. Questo scenario con due barre di scorrimento è sgradevole e confuso per l'utente.

Come posso aumentare (e possibilmente ridurre) la finestra di dialogo dell'interfaccia utente di JQuery per adattarla sempre al suo contenuto senza mostrare una barra di scorrimento? Preferirei che sia visibile solo una barra di scorrimento nella pagina principale.

Aggiornamento: a partire da jQuery UI 1.8, la soluzione di lavoro (come menzionato nel secondo commento) è usare:

width: 'auto'

Utilizzare l'opzione autoResize: true. Illustrerò:

  <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>

Ecco un esempio funzionante: http://jsbin.com/ubowa

La risposta è impostare il

autoResize:true 

durante la creazione della finestra di dialogo. Affinché ciò funzioni non è possibile impostare alcuna altezza per la finestra di dialogo. Quindi, se imposti un'altezza fissa in pixel per la finestra di dialogo nel suo metodo creatore o tramite uno stile, la proprietà autoResize non funzionerà.

Funziona con l'interfaccia utente jQuery v1.10.3

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

Ho usato la seguente proprietà che funziona bene per me:

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

L'altezza è supportata su auto.

La larghezza non lo è!

Per fare una sorta di auto ottenere la dimensione del div che stai mostrando e quindi impostare la finestra con.

Nel codice 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 ne hai bisogno per funzionare in IE7, non puoi usare l' opzione non documentata, buggy e non supportata {'width':'auto'} . Invece, aggiungi quanto segue al tuo .dialog():

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

La presenza .scrollWidtho meno dell'imbottitura sul lato destro dipende dal browser (Firefox differisce da Chrome), quindi è possibile aggiungere un numero soggettivo "abbastanza buono" di pixel a.scrollWidth o sostituirlo con la propria funzione di calcolo della larghezza.

Potresti voler includere width: 0tra i tuoi.dialog() opzioni, poiché questo metodo non ridurrà mai la larghezza, ma solo aumentarla.

Testato per funzionare su IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 e Opera 22.

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

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

fatto quello che mi serviva per ridimensionare la larghezza della finestra di dialogo.