css - 模态布局在Angular中没有响应

Question

我使用 angular7 ， bootstrap4 并使用 PSPDFKit 在查看器中打开 pdf 文件

查看器在模态中打开。

模态没有响应的问题。

我还希望 pspdfkit 以所有大小的模态打开（模态大小的 100%）

这是html代码：

<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>

.css 代码

.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%;
}

打开模态的代码：

 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';
  }

Answer 1

尝试在 ModalComponent 的 CSS 中使用断点

例子：

@media only screen and (max-width: 640px) {}

@media only screen and (min-width: 640px) {}

@media only screen and (min-width: 768px) {}

@media only screen and (min-width: 1200px) {}

Answer 2

您的模式正在使用这种样式，这会阻止它减小其宽度，因此也阻止它的内容宽度：

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

另外，请注意，在同一声明中设置的边距会强制 PSPDFKit 查看器内容占用容器宽度的 100%。

如有任何其他问题，请随时联系 PSPDFKit的支持人员，我们随时为您提供帮助 :)