Jquery dialog, Höhe und vertikale Bildlaufleiste

Bin ich wieder Daten per ajax zu füllen ein jquery-dialog. Die ajax ist im Grunde eine html-Tabelle mit einer Variablen Menge von Zeilen.

Möchte ich den dialog zu erweitern, zeigen die Zeilen, bis zu einer bestimmten vertikalen Größe (350px), an welcher Stelle es sollte zeigen, wird eine vertikale Bildlaufleiste.

Also, das scheint gut zu funktionieren - der dialog ändert, richtig abhängig von der Anzahl der Zeilen. Aber, ich habe nie bekommen Sie die vertikale Bildlaufleiste - also wenn ich 20 Zeilen, dann bekomme ich nur zu sehen, die Letzte 9.

Wie kann ich erzwingen Sie die vertikale Bildlaufleiste, wenn Sie die Höhe wäre besser gewesen, als 350px?

$.ajax({
    type: 'POST',
    url: 'myurl',
    data: postdata,
    dataType: 'json',
    success: function (result) {
        if (result.success && result.data) {
            var $dialog = $('<div></div>').html(result.data).dialog({
                autoOpen: false,
                title: 'History',
                modal: true,
                height: Math.min((result.rows * 25) + 150, 350),
                width: 800
            });
            $dialog.dialog('open');

        }
        event.preventDefault();
    }
});
InformationsquelleAutor JonoB | 2012-05-12
  1. 23

    Sollten Sie die css-Eigenschaft hinzufügen wird overflow:auto für Inhalt div.

    $("<div></div>").css({height:"350px", overflow:"auto"});

    Wenn Sie müssen NUR vertikale scroll - overflow-y:auto und overflow-x:hidden

    • OK, das funktioniert, aber warum ist der Bildlaufleiste nach unten gescrollt auf der Unterseite des Dialogfeld Inhalte, und nicht an der Spitze?
    • Sorry, ich habe verbessert mein Beispiel und fügte hinzu, jquery-ui-dialog. jsfiddle.net/D3ERm (In diesem Beispiel das Ergebnis.Zeilen = 20)
    • Die Einstellung der css NACH dem Aufruf von Dialogbox() hat den trick für mich: $("<div></div>").dialog({...}).css({height:"350px", overflow:"auto"})
    InformationsquelleAutor Eugene Trofimenko
  2. 4

    css max-height: 350px; und overflow:auto; .. sollte in Ordnung sein

    InformationsquelleAutor yeahman
  3. 1

    Ich weiß, das ist ziemlich alt, aber keiner von Ihnen arbeitete für mich. Hier ist, was funktioniert, wie von jQuery UI 1.10.

     $("#helptext").dialog({
        title: 'Blog Help',
        autoOpen: false,
        width: '90%',
        height: ($(window).height() - 200),
        modal: true
  });

    Passen Sie Höhe und Breite, wie Sie möchten. Ich habe teilen von text in meinem dialog, und wollte nicht das scrollen der ganzen Seite.

    InformationsquelleAutor Robert
  4. 0

    Ich wollte nicht zu einem festen px Höhe, so dass ich eine Lösung gefunden, was dem Modell die folgenden css-Regeln.

    .modal {
  display: inline-block !important;
  max-height: 90%;
  overflow: auto;/* Or scroll, depending on your needs*/}

    Ich hoffe, es funktioniert für Sie.

    InformationsquelleAutor Carlos Júlio
  5. 0

    Für mich gearbeitet:

        .jconfirm-holder { 
       overflow-y: auto; 
   }
    InformationsquelleAutor chronikum
Schreibe einen Kommentar