multiple pages are overlapping in ngx-extended-pdf-viewer

Question

I am using ngx-extended-pdf-viewer for my angular app and looks like multiple pdf pages are overlapping during viewing. here is my viewer code

<ngx-extended-pdf-viewer
        *ngIf="isVisible"
        [src]="pdfData"
        useBrowserLocale="true" 
        [textLayer]="true" 
        [showPrintButton]="true"
        [showDownloadButton]="true" 
        [showOpenFileButton]="false" 
        [showBookmarkButton]="false" 
        [showPresentationModeButton]="false" 
        height='90%'
        [zoom]="'100%'">
</ngx-extended-pdf-viewer>

I tried setting stylesheets for page and viewer classes but no luck.

score 0 · Answer 1 · answered Aug 28 '22 at 12:23

Sounds like you've got CSS rules interfering with the CSS rule of ngx-extended-pdf-viewer. Create a greenfield project to check if it's a general problem:

Open a terminal and navigate to the root folder of your project.
Run this command and accept the defaults:

ng add ngx-extended-pdf-viewer

Add the new component <app-example-pdf-viewer> to your <app-component> to display the PDF file.

Now you've got a working project that almost certainly does not suffer from your bug. Use the developer tools of your browser to compare the CSS code of the two projects to hunt down the bug.

multiple pages are overlapping in ngx-extended-pdf-viewer

1 Answers1