ng-bootstrap-Modal Größe
Was ist der beste Weg, zu setzen/überschreiben Sie eine benutzerdefinierte Breite für ein modales?
Scheint es ng-bootstrap unterstützt derzeit
Größe: 'sm' | 'lg'
aber Bootstrap-4 unterstützt sm, md und lg.
Idealerweise würde ich gerne das modale zu reagieren und anpassen, ähnlich wie container-Größen. Und auf mobile haben es bildschirmfüllend.
EDIT: Bootstrap-4 _variables.scss zu haben scheint $modal-md-Einstellung scheint aber unbenutzt.
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
InformationsquelleAutor Todd Smith | 2017-10-27
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die sauberste Lösung, die ich finden konnte, ist die Verwendung der windowClass-Eigenschaft.
I. e.:
Dann fügen Sie das folgende in deine Globale CSS-Stile. Dies ist wichtig, da der Stil nicht abgeholt werden von Ihren Komponenten-CSS.
Sie können auch verwenden, um relativ Breite:
max-width: calc(100vw - 500px);
InformationsquelleAutor TomDK
Versuchen wie diesem :
InformationsquelleAutor Chandru
fügen Sie folgenden css-Code in style.css-Datei.
Hinweis : wir ersetzen können
.xlModal
mit beliebigen Namen.modal öffnen mit neuen Stil.
ja. seine Ordnung, die in meiner app.
Aber das ist nicht für mich arbeiten. Ich habe das gleiche getan. Was könnte das Problem sein, es ist nur angesichts der Größe:'lg'
warten Sie, ich werde plunker.
funktioniert nicht mit NGbootstrap.
InformationsquelleAutor Kapil Thakkar
Fand ich dies als eine gute Lösung.
this.modalService.open(MyComponent, { windowClass: 'my-class'});
ng-deep "Schatten-piercing" Nachkomme combinator kann verwendet werden, um zu erzwingen, Stil nach unten durch die Kind-Komponente Baum in alle untergeordneten Komponente Aussicht. In diesem Fall modal-dialog Klasse.
::ng-deep .my-class .modal-dialog {
max-width: 80%;
width: 80%;
}
InformationsquelleAutor DanniFilth
Neben djpalme und Kapil Thakkar Antworten, die Sie benötigen, um die 'Kapselung' der Komponente zum
None
wie bereits erwähnt hierInformationsquelleAutor YnadW
Wenn Sie nicht angeben, die
size
, den Standardwert verwenden$modal-md
(500 Pixel).Alle 3 modals sm, md und lg reagieren und display auf voller Breite (mit Rand) auf dem Handy.
Wenn Sie wirklich wollen, eine neue Größe, die Sie verwenden können, eine benutzerdefinierte Größe:
Mit einer css-Klasse:
Dies scheitert für mich beim ausführen von npm aufzubauen.
Fehler auf Winkel 5, weil unerkannte argument:
Argument of type '{ size: "xl"; }' is not assignable to parameter of type 'NgbModalOptions'. Types of property 'size' are incompatible. Type '"xl"' is not assignable to type '"sm" | "lg"'.
InformationsquelleAutor Bastien