Stellen Sie sicher, dass der JQuery-UI-Dialog automatisch vergrößert oder verkleinert wird, um ihn an den Inhalt anzupassen

Ich habe ein Popup-Fenster des JQuery-UI-Dialogfelds, in dem ein Formular angezeigt wird. Durch Auswahl bestimmter Optionen im Formular werden neue Optionen im Formular angezeigt, wodurch es größer wird. Dies kann zu einem Szenario führen, in dem die Hauptseite eine Bildlaufleiste und das Dialogfeld der JQuery-Benutzeroberfläche eine Bildlaufleiste enthält. Dieses Szenario mit zwei Bildlaufleisten ist für den Benutzer unansehnlich und verwirrend.

Wie kann ich das Dialogfeld der JQuery-Benutzeroberfläche vergrößern (und möglicherweise verkleinern), damit es immer in den Inhalt passt, ohne dass eine Bildlaufleiste angezeigt wird? Ich würde es vorziehen, wenn nur eine Bildlaufleiste auf der Hauptseite sichtbar ist.

Update: Ab jQuery UI 1.8 ist die Arbeitslösung (wie im zweiten Kommentar erwähnt) zu verwenden:

width: 'auto'

Verwenden Sie die Option autoResize: true. Ich werde veranschaulichen:

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

Hier ist ein funktionierendes Beispiel: http://jsbin.com/ubowa

Die Antwort ist, die einzustellen

autoResize:true 

Eigenschaft beim Erstellen des Dialogs. Damit dies funktioniert, können Sie keine Höhe für den Dialog festlegen. Wenn Sie also in der Erstellungsmethode oder über einen beliebigen Stil eine feste Höhe in Pixel für das Dialogfeld festlegen, funktioniert die Eigenschaft autoResize nicht.

Dies funktioniert mit jQuery UI v1.10.3

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

Ich habe die folgende Eigenschaft verwendet, die für mich gut funktioniert:

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

Höhe wird auf Auto unterstützt.

Breite ist nicht!

Um eine Art Auto auszuführen, ermitteln Sie die Größe des angezeigten Divs und stellen Sie das Fenster mit ein.

Im C # -Code ..

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

Wenn Sie es für IE7 benötigen, können Sie die Option undokumentiert, fehlerhaft und nicht unterstützt nicht verwenden {'width':'auto'} . Fügen Sie stattdessen Folgendes zu Ihrem hinzu .dialog():

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

Ob .scrollWidthdas Auffüllen auf der rechten Seite enthalten ist, hängt vom Browser ab (Firefox unterscheidet sich von Chrome). Sie können also entweder eine subjektive "ausreichend gute" Pixelanzahl hinzufügen .scrollWidthoder diese durch Ihre eigene Breitenberechnungsfunktion ersetzen.

Möglicherweise möchten Sie zu width: 0Ihren .dialog()Optionen hinzufügen, da diese Methode die Breite niemals verringert, sondern nur vergrößert.

Getestet für IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 und Opera 22.

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

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

tat, was ich brauchte, um die Breite des Dialogfelds zu ändern.