bootstrap модально с pdf-viewer в angular 4 в некоторых случаях не удается - PullRequest
Новая
       18

bootstrap модально с pdf-viewer в angular 4 в некоторых случаях не удается

0 голосов
/ 10 марта 2020

Видео, чтобы понять проблему

Я использую angular 5 и ng2-pdf-viewer. В этом следующем модале, когда я захожу с другой страницы, он загружается правильно. но потом это создает странные проблемы, такие как видео. И идеальное решение возникает, когда размер браузера или окна изменился.

Пожалуйста, предложите мне возможные решения. 

.pdf-modal-body {
  /* overflow-x: scroll;*/
  overflow-y: scroll;
  height: 400px;
  scroll-behavior: smooth;
}

.modal {
  /* max-width: 1200px; */
  align-self: center;
}

.modal-dialog {
  max-width: 1100px;
}

.modal-body {
  max-width: 1100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="d-block mb-2 mb-lg-0 text-md-left text-md-right">
  <button class="btn btn-sm btn-rounded btn-outline-success" id="howToUnlockDialogTrigger" data-toggle="modal" data-target="#howToUnlockModal">
                        <i class="ti ti-course-how-to"></i> How to unlock this E-Book
                    </button>
</div>

<div class="modal" id="howToUnlockModal" tabindex="-1" role="dialog" aria-labelledby="Subscribe" aria-modal="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="shadow modal-content border-0">
      <button type="button" data-dismiss="modal" aria-label="Close" class="btn btn-danger border-0 modal-close-button">
                <span aria-hidden="true">×</span>
            </button>
      <div class="modal-header bg-green">
        <div class="container px-0">
          <div class="row">
            <div class="col-12 text-center">
              <h6 class="text-white">How to unlock this E-Book</h6>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-body">
        <div class="card-body card-body-modal">
          <div class="p-3 pdf-modal-body" id="pdf-modal-body">
            <pdf-viewer [src]="'../assets/how_to_pay.pdf'" [render-text]="true" [autoresize]="true" [fit-to-page]="fitToPage" [original-size]="false" style="display: block;" [show-all]="true">
            </pdf-viewer>
          </div>
        </div>
      </div>
      <div class="modal-footer border-0 justify-content-center">
        <button class="btn gradient-btn btn-rounded pr-4 pl-4" data-dismiss="modal" data-target="#howToUnlockModal">Ok</button>
      </div>
    </div>
  </div>
</div>
...