Multiple viewers on one page

[Spielboerg]

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
- [x] Feature request
- [ ] Documentation issue or request

I want to display multiple PDF files one below the other on one page. Also the PDF viewer should display all pages below each other (the black rectangle stands for the viewport):

However, since the viewer container is absolutely positioned, this does not work at the moment because the viewers are stacked on top of each other.

I changed the style from .ng2-pdf-viewer-container to position: relative which leads to this error:

Error: The `container` must be absolutely positioned.

When I remove the position: absolute rule from the viewer-container in the dev tools of the browser, the preview works exactly as expected. So I don`t understand why this restriction is there?

[Spielboerg]

My current workaround:

<pdf-viewer
  class="pdf-viewer"
  [class.pdf-viewer--relative]="positionPdfViewerRelative"
  [src]="objectUrl"
  [fit-to-page]="true"
  [show-all]="true"
  (after-load-complete)="handlePdfLoaded()"
></pdf-viewer>

public positionPdfViewerRelative: boolean = false;

public handlePdfLoaded(): void {
  this.positionPdfViewerRelative = true;
}

.pdf-viewer {
  display: block;

  &--relative {
    ::ng-deep .ng2-pdf-viewer-container {
      position: relative;
    }
  }
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Spielboerg]

Bump to remove stale.

[podger]

Same here: works fine if I remove position:absolute from F12 but gives error if change the style programmatically.

[olafvanv]

Same issue here, don't understand why this restriction is here.
Right now I'm "solving" it by using v6.4.1

[Spielboerg]

@podger have you tried my workaround to eliminate the error?
#806 (comment)

[Spielboerg]

@VadimDez There are more issues caused by the position: absolute: #805, #811
Therefore, please check whether this restriction is really necessary.

[podger]

@podger have you tried my workaround to eliminate the error? #806 (comment)

I "solved" downgrading the package to the older version.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[marcelo-leite]

I'm going through the same problem. "ng2-pdf-viewer": "^9.1.5",

[mejobloggs-cw]

I'm using 10.2.2 and have similar problems also.

I just want to display pdf's as part of regular flow on the page. E.g if the pdf is 100 pages long, then it will push content below it 100 pages down.

Only way I can get it to work is with .ng2-pdf-viewer-container { position: relative; }

Luckily @Spielboerg fix works for me, so a big thanks for that 👍