Video to understand the problem
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.
Please suggest me the possible solutions.
.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>
