My current project involves working with Angular 7 and Bootstrap 4, where I utilize PSPDFKit to open PDF files in a viewer placed within a modal.
One issue that I've encountered is that the modal does not adapt responsively to different screen sizes. Additionally, I am aiming for the PSPDFKit viewer to occupy the entire space within the modal (100% size).
You can view screenshots of the problem here and here.
Below is the HTML code snippet:
<style>
#app {
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
...
The CSS code aimed at improving modal responsiveness is provided below:
.modal{
z-index:1000 !important;
}
...
Lastly, here's the code snippet used to trigger the opening of the modal:
openModalWithComponent() {
const initialState = {
list: [
'Open a modal with component',
'Pass your data',
'Do something else',
'...'
],
title: 'Document Viewer'
};
this.bsModalRef = this.modalService.show(ModalComponent, Object.assign({ initialState }, { class: 'gray modal-lg' }));
this.bsModalRef.content.closeBtnName = 'Close';
}