Topic: Make modal full page
1001albertpadilla asked 5 years ago
Here's the code I have to open the modal.
openAddModal() { this.modalRef = this.modalService.show(EmployeeAddModalComponent, { backdrop: true, keyboard: true, focus: true, show: false, ignoreBackdropClick: true, class: 'modal-frame vh-100 col-md-10 modal-notify modal-success modal-dialog-scrollable', animated: false } ); }
Bartosz Termena staff answered 5 years ago
Dear @1001albertpadilla
We'll change the modal-full-height
class in the next version.
Until now, you can add the code below to your styles.scss
.modal-full-height {
.modal-content {
position: absolute;
min-height: 100%;
max-height: 100%;
margin: 0;
top: 0;
right: 0;
}
}
and change openAddModal()
to
openAddModal() {
this.modalRef = this.modalService.show(ModalComponent, {
backdrop: true,
keyboard: true,
focus: true,
show: false,
ignoreBackdropClick: true,
class:
'modal-frame modal-full-height col-md-10 modal-notify modal-success modal-dialog-scrollable',
animated: false,
});
}
Best Regards, Bartosz.
1001albertpadilla commented 5 years ago
Thanks! The modal is now occupying the full page height. Something else changed though. The modal is also now occupying the FULL page WIDTH. I have the class set to col-md-10, but now it doesn't seem to work anymore.
I need the modal to occupy the full page height, but should occupy only 80% of the page width. Is this possible?
Bartosz Termena staff answered 5 years ago
Dear @1001albertpadilla
Now I understand exactly what you meant.
For now, our modals can not occupy 80% of the page width.We will try to change it in next version.
Until now, you can try this solution:
Replace the previous code with:
styles.scss
:
.modal-dialog-scrollable .modal-content {
min-height: 100vh;
}
openAddModal()
:
openAddModal() {
this.modalRef = this.modalService.show(ModalComponent, {
backdrop: true,
keyboard: true,
focus: true,
show: false,
ignoreBackdropClick: true,
class: 'modal-frame col-md-10 modal-notify modal-success modal-dialog-scrollable',
animated: false,
});
}
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.3
- Device: Laptop
- Browser: Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
Please add more details to your question. What is the exact problem with this code?
1001albertpadilla commented 5 years ago
The modal is only occupying 80% of the page height. I want it to occupy the full page height. Is that doable?
Bartosz Termena staff commented 5 years ago
We will take a closer look at this problem and provide a fix/workaround for that.
Best Regards, Bartosz.