cssangularbootstrap-4pspdfkit

Modal Layout not Responsive in Angular

I work with angular7 , bootstrap4 and I use PSPDFKit in order to open pdf file in viewer

the viewer is open in the modal.

enter image description here

the problem that the modal is not responsive.

enter image description here

also I want that the pspdfkit to be open in all size of the modal ( 100 % of the size of the modal )

this is the html code :

<style>
  #app {
  
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
</style>





<div class="modal-dialog modal-800" >
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title pull-left">attachmnt</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div id="app">
      </div>
    </div>
    <div class="modal-footer">
      <button *ngIf="this.categAttachmnt !=null" type="button" class="btn btn-default"  (click)="saveFile()">حفظ التعديلات</button>
      <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">close</button>
      <button type="button" class="btn btn-default" (click)="getURLDowload()">download </button>
    </div>
  </div>
</div>

the .css code

.modal{
  z-index:1000 !important;
}

.modal-backdrop{
  z-index:999 !important;
}

[dir='rtl'] .modal-title{
  color: rgb(255, 82, 82);
  //font-family: 'Roboto', sans-serif !important;
  margin-right: 20px !important;
  font-weight: bold;
}

.bsm-modal .bsm-modal-x-btn {
  top: 8px;
  margin: 0;
  z-index: 1;
  padding: 0;
  opacity: 1;
  right: 15px;
  cursor: pointer;
  line-height: 1;
  text-shadow: none;
  position: absolute;
  font-weight: 700;
  font-family: inherit;
  background: transparent;
  border: 0;
}


.modal-lg {
  max-width: 90%;
  height: 100%;
}
.modal-dialog .gray .modal-lg > .modal-content{
  height:100%
}
.modal-dialog > .modal-content {
  height: 720px;
  width: 100%;
}



.modal-dialog.modal-800 {
  width: 800px;
  margin: 30px auto;
}


.modal-footer button {
  width: 10%;
  margin: 1%;
  padding: 0.5% 1%;
}

the code to open 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';
  }
Solution

  • Your modal is using this style, which prevents it from reducing its width, and therefore its content width as well:

    .modal-dialog.modal-800 {
  width: 800px;
  margin: 30px auto;
}

    Also, notice that the margins set in that same declaration are forcing the PSPDFKit viewer content from taking 100% of the width of the container.

    Feel free to contact support at PSPDFKit for any further questions, we're there to help you :)