title: bootstrap modal with pdf-viewer in angular 4 failing in few case
body: <p><a href="https://youtu.be/hio3h6tyHA8" rel="nofollow noreferrer">Video to understand the problem</a></p>
  
  <p>I am using angular 5 and ng2-pdf-viewer. In this following modal, when I come from another page, it loads correctly. but afterward, it creates strange issues like the video. And the perfect solution occurs when the browser or window got resized. </p>
  
  <p>Please suggest me the possible solutions. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"&gt;&lt;/script&gt;
  &lt;div class="d-block mb-2 mb-lg-0 text-md-left text-md-right"&gt;
    &lt;button class="btn btn-sm btn-rounded btn-outline-success" id="howToUnlockDialogTrigger" data-toggle="modal" data-target="#howToUnlockModal"&gt;
                          &lt;i class="ti ti-course-how-to"&gt;&lt;/i&gt; How to unlock this E-Book
                      &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="modal" id="howToUnlockModal" tabindex="-1" role="dialog" aria-labelledby="Subscribe" aria-modal="true"&gt;
    &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
      &lt;div class="shadow modal-content border-0"&gt;
        &lt;button type="button" data-dismiss="modal" aria-label="Close" class="btn btn-danger border-0 modal-close-button"&gt;
                  &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
              &lt;/button&gt;
        &lt;div class="modal-header bg-green"&gt;
          &lt;div class="container px-0"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-12 text-center"&gt;
                &lt;h6 class="text-white"&gt;How to unlock this E-Book&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="modal-body"&gt;
          &lt;div class="card-body card-body-modal"&gt;
            &lt;div class="p-3 pdf-modal-body" id="pdf-modal-body"&gt;
              &lt;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"&gt;
              &lt;/pdf-viewer&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer border-0 justify-content-center"&gt;
          &lt;button class="btn gradient-btn btn-rounded pr-4 pl-4" data-dismiss="modal" data-target="#howToUnlockModal"&gt;Ok&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>