Topic: how to setup the size of a modal

moulot priority asked 4 years ago


hello, how do i modifiy the size of a modal. the modal-lg is not large enough for my case. ideally i would like to setup like this : size: '800px'. thank you Georges


Arkadiusz Idzikowski staff answered 4 years ago


You can add your custom class or overwrite the existing .modal-lg class and modfiy max-width value:

.modal-lg {
    max-width: 1200px;
}

moulot priority commented 4 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 priority commented 4 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 4 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 priority commented 4 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 4 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 priority commented 4 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 4 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.0.0
  • Device: dell notebook
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No
Tags