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

131

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.

jquery jquery-ui jquery-ui-dialog

— MikeN
quelle

1

Ich würde vorschlagen, ein Beispiel des Codes zu veröffentlichen. Es ist schwierig, eine Lösung zu empfehlen, ohne die Struktur des Dialogs zu sehen.

— Diego

139

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

— cgp
quelle

Hmm .. muss meinen FrameDialog erweitern ... es ist im Wesentlichen eine Methode, die einen iframed-Inhalt zur Verwendung mit dialog erstellt. Es ist nicht perfekt, funktioniert aber gut für ein Projekt, für das ich es brauchte.

— Tracker1

20

Das hat bei mir nicht funktioniert. Stattdessen setze ich die Option "width" auf "auto".

— Sam

+1 zum Kommentar - es hat bei mir funktioniert, und das Beispiel funktioniert auch, also muss ich mir vorstellen, dass sich dies nicht geändert hat, aber hey, wenn alles andere fehlschlägt, probieren Sie es aus.

— CGP

Dies funktioniert jedoch nicht für die Breite, sondern nur für die Höhe, denke ich.

— Walt W

18

Diese Antwort ist nicht mehr gültig für Version 1.8.4. Verwenden Sie stattdessen height auto forum.jquery.com/topic/dialog-auto-width

— Jeff

48

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.

— MikeN
quelle

9

Fantastisch :) aber warum hat jQuery das nicht in ihre Dokumentation aufgenommen?!. Trotzdem danke dir.

— Wahid Bitar

Vorsicht, funktioniert nicht mit der Positionierung durch Trigger-Plugin (at, my, off usw.)

— Jeffz

26

Dies funktioniert mit jQuery UI v1.10.3

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

— IlludiumPu36
quelle

Hat auch für mich funktioniert (v1.11.1).

— Jay Cummins

11

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

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

— Emolah
quelle

2

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

— Der Demz
quelle

2

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.

— Vladimir Kornea
quelle

1

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

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

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

— user596393
quelle