how to setup the size of a modal

moulot pro premium priority commented 5 years ago

Sorry, i'm talking about size: 'lg' in modalOptions. so for modal-lg, i should put it in the windowClass property? windowClass: 'modal-lg'

moulot pro premium priority commented 5 years ago

Hello, my explanation was wrong. here's my code to open the modal : openModal1() { this.modalRef1 = this.modalService1.show(ModalTestComponent, { backdrop: true, keyboard: true, focus: true, show: false, ignoreBackdropClick: false, animated: true }); } where do i setup the class 'modal-lg'?

Arkadiusz Idzikowski staff commented 5 years ago

In this case you can add the 'modal-lg' (or any other custom class) to the 'class' option:

this.modalService.show(ModalTestComponent, { class: 'modal-lg' });

moulot pro premium priority commented 5 years ago

I did that with no result. i put custom modal-lg in ModalTest.Component.html to no avail : .modal-lg { max-width: 80% }

Arkadiusz Idzikowski staff commented 5 years ago

You don't need to modify modal html template, just add the 'class' options (see snippet from my previous comment). In case of any further problems please update your first post with full html/ts code used to create modal.

moulot pro premium priority commented 5 years ago

here is my code : .ts openModal() { const modalOptions = { backdrop: true, keyboard: false, focus: true, show: false, scroll: true, ignoreBackdropClick: false, class: 'modal-lg', containerClass: '', animated: true, data: { classId: this.classId } };

this.modalRef = this.modalService1.show(ModalScheduleComponent, modalOptions);
this.modalRef.content.saveSchedule.subscribe((data) => {
  this.saveSchedules(data);
});

}

modal-schedule.component.html :

modal-schedule.component.scss : .modal-lg { max-width: 80% }

Arkadiusz Idzikowski staff commented 5 years ago

I double checked that and if you pass class: 'modal-lg' options to the modalOptions, then it is added correctly to the modal container. Can you check that in dev tools and confirm if element with class modal-dialog has modal-lg class after opening modal?

Then if you add custom .modal-lg { max-width: 80% } to your global styles.scss it should work correctly. If there still will be any problems it must be something with modal implementation and we won't be able to help without additional information/code.