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
quelle
Antworten:
Wie wäre es mit der folgenden Lösung? Es hat bei mir funktioniert. Versuche dies:
Einzelheiten:
overflow-y: auto;
oderoverflow: auto;
aus der .modal-Klasse (wichtig)max-height: 400px;
aus der.modal
Klasse entfernen (wichtig)max-height: 400px;
zu .modal .modal-body (oder was auch immer, kann420px
oder weniger sein, würde aber nicht mehr als gehen450px
)overflow-y: auto;
zu.modal .modal-body
Fertig, nur der Körper wird scrollen.
quelle
max-height: 80%;
funktioniert jedoch nicht, sondern wird erweitert, anstatt zu scrollen. Muss ich Größenanpassungsereignisse zum Anpassen verwenden$(".modal")[0].style.maxHeight
?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:
Ich arbeite perfekt für mich, auch reaktionsschnell! :) :)
quelle
Dies funktioniert für Bootstrap 3 ohne JS-Code und reagiert.
Quelle
quelle
Versuchen Sie, Bootstraps zu überschreiben:
Mit:
Es hat bei mir funktioniert.
quelle
Ich habe auch hinzugefügt
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
Scheint glücklich zu sein in FireFox, Chrome, IE10 8 & 7 (die Browser, die ich zur Hand hatte)
quelle
Ihr Modal wird in Firefox versteckt, und das liegt an der negativen Randdeklaration, die Sie in Ihrem allgemeinen Stylesheet haben:
Entfernen Sie den negativen Rand und alles funktioniert gut.
quelle
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:
quelle
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:
Es reagiert nicht auf Änderungen der Fenstergröße, aber das kommt sowieso nicht so oft vor.
quelle
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.
quelle
Nichts davon funktioniert wie erwartet. Der richtige Weg ist, die Position zu ändern: fest auf Position: absolut für die .modal-Klasse
quelle