web-dev-qa-db-fra.com

ng-bootstrap Taille modale

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

Il semble que ng-bootstrap supporte actuellement 

taille: 'sm' | 'lg'

mais Bootstrap 4 supporte sm, md et lg.

Idéalement, j'aimerais que le modal soit réactif et s'adapte à la taille du conteneur. Et sur mobile, allez en plein écran.

EDIT: Bootstrap 4 _variables.scss semble avoir un paramètre $ modal-md mais semble être inutilisé.

$modal-lg:                    800px !default;
$modal-md:                    500px !default;
$modal-sm:                    300px !default;
angularng-bootstrap
9
Todd Smith

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"});

Ajoutez ensuite les éléments suivants à vos styles CSS globaux. Ceci est important car le style ne sera pas repris de vos composants CSS.

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

Essayez comme ça:

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' });
    }

}
14
Chandru

ajouter les css suivants dans le fichier style.css.

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

Remarque: nous pouvons remplacer .xlModal par n’importe quel nom.

modal ouvert avec le nouveau style créé.

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

En plus des réponses de djpalme et Kapil Thakkar, vous devrez définir "l'encapsulation" de votre composant sur None comme indiqué ici

@Component({
    selector: 'app-generic-view',
    templateUrl: './generic-view.component.html',
    styleUrls: ['./generic-view.component.scss'],
    encapsulation: ViewEncapsulation.None
})
0
YnadW