Ng2-pdf-viewer: Styling issue when trying to putting pdf viewer to right of html content

[jgrant95]

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [x] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

So I'm trying to implement the pdf viewer into an existing angular project. However, for the time being I'm going to simply have to use an iframe to fit my needs. As currently in the pdf viewer there seems to be a styling issue - whether this is a simple fix I don't know as my styling knowledge isn't great.

The issue itself basically does not seem to visually load the pdf and is not visible whatsoever and has a spinner stuck on each page of the pdf.

I have reproduced this issue over in stackblitz. So if anyone gets a chance to take a look at this issue, I would much appreciate it.

https://stackblitz.com/edit/ng2-pdf-viewer-qdfyem

Thank you 😄

[ColinT]

This appears to be an issue with mozilla/pdf.js.

I submitted my findings here: #10348.

Your iframe solution is more stable, but if you really don't want to use an iframe you can use a different workaround. Change your first col-6 into a new class with width: 49%;.

Example:

<!-- app.component.html -->
<h2>PDF Viewer</h2>

<div>
  <!-- Left content -->
  <div class="percent-49">
    <div class="content-example">
      Content Goes Here
    </div>

    <div class="button-example">Continue</div>
    <div class="button-example">Cancel</div>
  </div>

  <!-- Right content -->

  <pdf-viewer class="col-6" [src]="src" [original-size]="false" [autoresize]="true"></pdf-viewer>  
</div>

// app.component.scss
// ...
.percent-49 {
  width: 49%;
  float: left;
}
// ...

This works because then the left offset is less than the width of the PDFViewer, which passes their check for which pages to render.

[jgrant95]

@ColinT Brilliant, amazing work! Thanks for your help and will keep an eye on the issue you've raised on Mozilla/pdf.js. Will be sticking with the iframe in the meantime.

Thank you again 😃

[ColinT]

I found a stable way to make this work without an iframe, using position: relative; on a parent container:

<!-- app.component.html -->
<h2>PDF Viewer</h2>

<div>
  <!-- Left content -->
  <div class="col-6">
    <div class="content-example">
      Content Goes Here
    </div>

    <div class="button-example">Continue</div>
    <div class="button-example">Cancel</div>
  </div>

  <!-- Right content -->

  <div class="col-6" style="position:relative;">
    <pdf-viewer [src]="src" [original-size]="false" [autoresize]="true" style="display: block"></pdf-viewer>
  </div>
</div>

This works because pdfjs-dist uses element.offsetLeft to calculate whether pages are viewable. element.offsetLeft calculates its offset from the closest relatively positioned parent element (MDN reference).

Without the parent container, pdf-viewer will assume the closest parent is app-component and will calculate the viewable pages incorrectly, since it is offset 50% from the left. So we have to create a relatively positioned parent to correct the calculation.

Here is a stackblitz: https://stackblitz.com/edit/ng2-pdf-viewer-xqbb7v?file=app/app.component.html
You can see that removing the style="position:relative;" creates the bug you encountered.

[nithincn89]

@ColinT Thanks a lot. Your solution and explanation is really great..

[VadimDez]

Fixed in 6.0.0 https://github.com/VadimDez/ng2-pdf-viewer/blob/master/CHANGELOG.md#600

[nkimadusanka]

We use the latest version of typescript 2. This library 6.0.0 onwards only support typescript 3. @ColinT solution is only fixed if you stuck under version 5.