Taille du modal ng-bootstrap

Question

Quel est le meilleur moyen de définir/remplacer une largeur personnalisée pour une modale ?

Il semble que ng-bootstrap prend actuellement en charge

size: 'sm' | 'lg'

mais Bootstrap 4 prend en charge sm, md et lg.

Idéalement, je voudrais que la modale soit réactive et s'adapte de la même manière aux tailles des conteneurs. Et sur mobile, qu'elle prenne toute la largeur de l'écran.

EDIT: Bootstrap 4 _variables.scss semble avoir un réglage $modal-md mais il semble ne pas être utilisé.

$modal-lg:                    800px !default;
$modal-md:                    500px !default;
$modal-sm:                    300px !default;

Answer 1

La solution la plus propre que j'ai pu trouver est d'utiliser la propriété windowClass.

C'est-à-dire :

this.modalService.open(MyModalComponent,  { windowClass : "myCustomModalClass"});

Ensuite, ajoutez ce qui suit à vos styles CSS globaux. C'est important car le style ne sera pas pris en compte à partir de votre CSS de composants.

.myCustomModalClass .modal-dialog {
  max-width: 565px;
}

Answer 2

Essayez comme ceci :

import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ModelComponent } from './model.component';

export class Component {

    constructor(private modalService: NgbModal) {}

    open() {
        const modalRef = this.modalService.open(ModelComponent, { size: 'lg', backdrop: 'static' });
    }

}

Answer 3

J'ai trouvé cela comme une bonne solution.

this.modalService.open(MyComponent, { windowClass: 'my-class'});

ng-deep Le combinateur de descendant "shadow-piercing" peut être utilisé pour forcer un style à travers l'arbre des composants enfants dans toutes les vues des composants enfants. Dans ce cas, la classe modal-dialog.

::ng-deep .my-class .modal-dialog { 
     max-width: 80%;
     width: 80%;
}

Answer 4

Lorsque vous ne spécifiez pas la taille, la valeur par défaut utilisée est $modal-md (500px).

Tous les 3 modales sm, md et lg sont responsives et s'afficheront en pleine largeur (avec des bordures) sur mobile.

Si vous voulez vraiment une nouvelle taille, vous pouvez utiliser une taille personnalisée :

this.modalService.open(MyModalComponent, { size: 'xl' });

Avec un css pour cette classe :

.modal-xl {
  max-width: 1000px;
}

MODIFIER : la taille xl est désormais une taille standard donc le CSS.

Answer 5

Ajoutez le css suivant dans le fichier style.css.

.xlModal > .modal-dialog {
    max-width: 1490px !important;
    min-width: 971px !important;   
    width: 95% !important;
}

Note : on peut remplacer .xlModal par n'importe quel nom.

ouvrir la modal avec le nouveau style créé.

this.modalService.open(content,{windowClass:"xlModal"});