Ich versuche, die Größe des modalen Formulars zu ändern oder es auf den Inhalt zu reagieren, den ich dort wiedergebe. Ich verwende es zum Rendern eines Formulars und würde mich bei Bedarf lieber mit dem Scrollen befassen.
Das Formular, das ich rendere, benötigt wahrscheinlich weitere 50 Pixel - nur die Schaltflächen fehlen.
Daher habe ich versucht, die .modal-Stile in meiner Datei application.css.scss (Using Rails 3.2) zu überschreiben, aber die Deklerationen für maximale Höhe und Überlauf scheinen überschrieben zu sein.
Irgendwelche Gedanken?
twitter-bootstrap
Ein Kuchen
quelle
quelle
Antworten:
Ich hatte genau das gleiche Problem, Sie können versuchen:
Wenn Sie feststellen, dass die Bildlaufleisten nur im Körperteil des modalen Dialogfelds angezeigt werden, bedeutet dies, dass die maximale Höhe nur des Körpers angepasst werden muss.
quelle
in Bootstrap 3:
quelle
#modal_ID .modal-dialog { width: 800px }
Sie müssen sicherstellen, dass es sich auf dem # myModal .modal-body-Element befindet, nicht nur auf #myModal (einige Leute machen diesen Fehler), und Sie möchten möglicherweise auch die Höhenänderung berücksichtigen, indem Sie die Modalränder ändern.
quelle
Verwenden Sie die neue CSS3-Messung 'vh' (oder 'vw' für die Breite) (mit der die Höhe als Bruchteil des Ansichtsfensters festgelegt wird):
Auf diese Weise können Sie dieses Design auch in Ihren Modalen beibehalten, wenn Sie ein responsives Framework wie Bootstrap verwenden.
quelle
Wenn Sie zwei Methoden für Breite und Höhe mischen, haben Sie einen guten Hack:
CSS:
JQuery:
Dieser ist der, den ich benutze. Es behebt Probleme mit dem Rand und den Bildlaufleisten sowohl für die Breite als auch für die Höhe, ändert jedoch nicht die Größe des Modals, um es an den Inhalt anzupassen.
Hoffe ich war hilfreich!
quelle
Verwenden einer CSS-Klasse (Sie können auch den Stil überschreiben - nicht empfohlen):
(html)
(CSS)
quelle
Ich habe die Antwort bekommen ... die Sache ist, dass Sie das Attribut max-height überschrieben haben, um die Größe des Bootstrap-Modals über die 500px-Höhenbeschränkung hinaus zu ändern
quelle
Bootstrap Großes Modell
Bootstrap Kleines Modell
quelle
Stellen Sie einfach die ".modal-body" -Höhe ein: 100% Die Höhe wird automatisch gemäß Ihrem Inhalt angepasst und die "maximale Höhe" gemäß Ihrem Bildschirm festgelegt ...
quelle
Haben Sie den Größenparameter ausprobiert:
Optionale Größen
Modale haben zwei optionale Größen, die über Modifikatorklassen verfügbar sind und in einem .modal-Dialog platziert werden können.
Wenn Sie etwas anderes möchten, aktualisieren Sie die Datei bootstarp.css
quelle
Für Boostrap> 4 hat das bei mir funktioniert:
eine fortgeschrittenere Version:
Hier ist ein Codepen:
https://codepen.io/AlfredoMoralesPinzon/pen/xyVOaK
quelle
Angenommen, Ihr Modal hat die ID des
modal1
folgenden CSS, würde die Höhe des Modals erhöhen und einen Überlauf anzeigen.quelle
Ich habe einige der oben genannten Versuche unternommen, um bestimmte Größen für Breite und Höhe festzulegen (um ein Bild in einem Modal anzuzeigen), und da mir keiner der oben genannten Punkte geholfen hat, habe ich beschlossen, die Stile zu überschreiben, und dem Haupt-Div> Folgendes hinzugefügt class = "Modal Hide Fade In": dh dem Style-Tag eine Breite für den Hintergrund des Modals hinzugefügt.
und fügte dann die folgenden 'Stil'-Tags zum Modalkörper hinzu:
funktioniert jetzt wie ein Zauber, ich zeige ein Bild an und jetzt passt es perfekt.
quelle
Das hat bei mir funktioniert:
Beachten Sie, dass in meinem Fall, ich verschachtelte Modalverben habe, von denen jede Kontrolle , die unterschiedlichen Höhen erfordern , wenn ich Knie Steuerung der Anzeige innerhalb der verschachtelten modal , so konnte ich das nicht für max-height statt height: 100% funktioniert gut für mich.
quelle
Vergessen Sie nicht die optionalen Bootstrap-Klassen
modal-lg
undmodal-sm
wenn Sie innerhalb des responsiven Frameworks bleiben möchten. Fügen Sie unter Ihrem Formular einen Clearfix hinzu, der abhängig von Ihrer Struktur hilfreich sein kann.quelle
Ich habe es kürzlich versucht und es richtig verstanden: Ich hoffe, das wird hilfreich sein
Dadurch wird die Höhe Ihres Modells angepasst.
quelle
Hier ist eine weitere einfache Methode, um das Bootstrap-Modal zu vergrößern:
Die Breite des Modals kann in Prozent des Bildschirms angegeben werden. Im obigen Beispiel habe ich es auf 80% meiner Bildschirmbreite eingestellt.
Unten ist ein Arbeitsbeispiel dafür:
quelle