Twitter Bootstrap scrollbar modal

83

Ich verwende Twitter Bootstrap für ein Projekt, an dem ich arbeite.

Ich habe ein modales Fenster mit einer etwas längeren Form und es hat mir nicht gefallen, dass das Modal nicht gescrollt hat, wenn das Fenster zu klein wurde (wenn es einfach von meiner Seite verschwunden ist, die nicht scrollbar ist).

Um dies zu beheben, habe ich das folgende CSS verwendet

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

Dies funktioniert genau so, wie ich es in Chrome möchte (das heißt, das Formular ist in voller Größe, wenn das Fenster groß genug ist, aber wenn das Fenster verkleinert wird, verkleinert sich das Modal und wird scrollbar). Das Problem ist, dass im IE das Modal nicht auf dem Bildschirm angezeigt wird. Hat jemand eine bessere Lösung für dieses Problem?

Mein Beispiel finden Sie unter tinyhousemap.com (klicken Sie im Navigationsfenster auf "Eintrag zur Karte hinzufügen", damit das Modal angezeigt wird).

Vielen Dank

Dan Punktnetz
quelle
Ich habe diese Lösung gefunden und verwendet. Es ist sehr geschickt darin, wie nur das Bootstrap-Modal scrollen kann und nicht der Hintergrundinhalt. github.com/aroc/Bootstrap-Scroll-Modal
Richard Adleta

Antworten:

137

Wie wäre es mit der folgenden Lösung? Es hat bei mir funktioniert. Versuche dies:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

Einzelheiten:

  1. entfernen overflow-y: auto;oder overflow: auto;aus der .modal-Klasse (wichtig)
  2. max-height: 400px;aus der .modalKlasse entfernen (wichtig)
  3. Hinzufügen max-height: 400px;zu .modal .modal-body (oder was auch immer, kann 420pxoder weniger sein, würde aber nicht mehr als gehen 450px)
  4. Hinzufügen overflow-y: auto; zu.modal .modal-body

Fertig, nur der Körper wird scrollen.

Lijana Saniukaite
quelle
5
Ich bin alleine so weit gekommen, wollte aber wirklich, dass es so hoch ist, wie es das Fenster erlaubt, und nicht der kleinste gemeinsame Nenner. Die Angabe max-height: 80%;funktioniert jedoch nicht, sondern wird erweitert, anstatt zu scrollen. Muss ich Größenanpassungsereignisse zum Anpassen verwenden $(".modal")[0].style.maxHeight?
Peter Wone
18

Ich habe eine winzige Lösung nur mit jQuery gemacht.

Zuerst müssen Sie eine zusätzliche Klasse zu Ihrer <div class="modal-body">"ativa-scroll" hinzufügen, damit sie ungefähr so ​​wird:

<div class="modal-body ativa-scroll">

Fügen Sie jetzt einfach diesen Code auf Ihre Seite in der Nähe Ihres JS-Ladevorgangs ein:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

Ich arbeite perfekt für mich, auch reaktionsschnell! :) :)

Massa
quelle
1
Tolle Lösung, aber ich würde die Höhe auf maximale Höhe ändern
Oleg
1
Sie können auch $ ('. Modal'). On ('show.bs.modal', Funktion (e) {}) verwenden. um die Dimensionierungsfunktion auszulösen. Dadurch wird die Höhe nur nach Bedarf berechnet, nicht bei jeder Größenänderung und Belastung. Sie müssen nur innerhalb der Funktion des Ereignisses überprüfen, ob das aktuelle Modal die benutzerdefinierte Bildlaufhöhe verwendet, bevor Sie das CSS berechnen / anwenden. dh var scrollModal = $ ('. modal-body.modal-scroll', this); if (scrollModal.length) ...
Robert Waddell
ist das für Bootstrap 2 oder 3?
Spion
16
/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Dies funktioniert für Bootstrap 3 ohne JS-Code und reagiert.

Quelle

Guillaume Renoult
quelle
ist das Bootstrap 2 oder 3? Frage wurde höchstwahrscheinlich für Bootstrap 2
Spion
@spy dies ist für Bootstrap 3
Guillaume Renoult
8

Versuchen Sie, Bootstraps zu überschreiben:

 .modal {
position: fixed;

Mit:

.modal {
position: absolute;

Es hat bei mir funktioniert.

Dan Baker
quelle
1
Es verursacht Ausrichtungsprobleme auf dem iPad
Oleg
4

Ich habe auch hinzugefügt

.modal { position: absolute; }

zum Stylesheet, damit der Dialog scrollen kann. Wenn der Benutzer jedoch zum Ende einer langen Seite gewechselt ist, kann das Modal am oberen Rand des sichtbaren Bereichs ausgeblendet werden.

Ich verstehe, dass dies in Bootstrap 3 kein Problem mehr ist, aber als ich nach einer relativ schnellen Lösung suchte, bis wir ein Upgrade durchgeführt haben, endete ich mit dem oben genannten Plus und rief Folgendes auf, bevor ich das Modal öffnete

$('.modal').css('top', $(document).scrollTop() + 50);

Scheint glücklich zu sein in FireFox, Chrome, IE10 8 & 7 (die Browser, die ich zur Hand hatte)

Abs
quelle
1

Ihr Modal wird in Firefox versteckt, und das liegt an der negativen Randdeklaration, die Sie in Ihrem allgemeinen Stylesheet haben:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

Entfernen Sie den negativen Rand und alles funktioniert gut.

Andres Ilich
quelle
Durch Entfernen des Randes oben wurde das Modal verbessert, sodass es im IE nicht so weit vom Bildschirm entfernt ist. Jetzt wird es nur noch (vertikal) auf dem Bildschirm bei einer bestimmten Fenstergröße zentriert. Bei allen anderen Größen läuft das Modal oben oder unten auf dem Bildschirm über.
Dan Dot Net
1
@Dandotnet das Modal positioniert sich automatisch 50% vom oberen Rand des Fensters, Sie können dies mit etwas weniger als 10% überschreiben, aber wenn Sie einen negativen Wert hinzugefügt haben, wird es einfach vom Bildschirm verschwinden, wie es im IE der Fall ist. Das gleiche passiert übrigens auch bei Firefox.
Andres Ilich
1

Bei Verwendung .modal {overflow-y: auto;}wird eine zusätzliche Bildlaufleiste rechts auf der Seite erstellt, wenn der Text bereits übergelaufen ist.

Die Problemumgehung besteht darin, den Überlauf vorübergehend aus dem Body- Tag zu entfernen und den modalen Überlauf-y auf auto zu setzen .

Beispiel:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});
Ilia Rostovtsev
quelle
1

Das Problem mit der CSS-Lösung von @ grenoult (die meistens funktioniert) besteht darin, dass sie vollständig reagiert und mobil ist, wenn die Tastatur angezeigt wird (dh wenn sie auf eine Eingabe im modalen Dialogfeld klicken), die Bildschirmgröße sich ändert und die modalen Dialogfelder Wenn sich die Größe ändert, kann die Eingabe, auf die sie gerade geklickt haben, ausgeblendet werden, sodass sie nicht sehen können, was sie eingeben.

Die bessere Lösung für mich war, jquery wie folgt zu verwenden:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

Es reagiert nicht auf Änderungen der Fenstergröße, aber das kommt sowieso nicht so oft vor.

dbryson
quelle
1

Ich konnte dies überwinden, indem ich die "vh" -Metrik mit maximaler Höhe für das .modal-body-Element verwendete. 70vh sah für meine Zwecke richtig aus. Stellen Sie dann den Überlauf-y auf auto ein, damit nur bei Bedarf gescrollt wird.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}
Keith.Abramo
quelle
0

Nichts davon funktioniert wie erwartet. Der richtige Weg ist, die Position zu ändern: fest auf Position: absolut für die .modal-Klasse

SoßePlaya
quelle
2
Worauf stützen Sie Ihre Schlussfolgerung?
Rafael Herscovici