Allow for multi-line toolbars

[raphael22]

Hi !

Is there a way to prevent parent element from scrolling into first page after load/zoom ?
Nb: On zoom it's only after unzooming to fit and below that.
I made a custom toolbar and I want it to be visible after load/zoom.

Expected:

Result:

ngx-extended-pdf-viewer 7
Angular 11.1

[stephanrauh]

Actually, it's not the parent, but a sibling. Be that as it may: I've got an idea how to help you. However, my first attempt wasn't successful, so I'd like to test my solution more thoroughly. Would you mind to send me the source code of your custom toolbar?

[raphael22]

<ng-template #customToolbar>
  <div class="header">
    <button mat-icon-button (click)="zoomIn()">
      <mat-icon>zoom_in</mat-icon>
    </button>
    <button mat-icon-button (click)="zoomOut()">
      <mat-icon>zoom_out</mat-icon>
    </button>
    <button mat-icon-button (click)="zoomReset()">
      <mat-icon>fullscreen</mat-icon>
    </button>

    <button mat-icon-button (click)="rotate()">
      <mat-icon>replay</mat-icon>
    </button>

    <div class="flex-spacer"></div>
    <button mat-icon-button (click)="print()">
      <mat-icon>print</mat-icon>
    </button>
    <button mat-icon-button (click)="download()">
      <mat-icon>download</mat-icon>
    </button>
  </div>
</ng-template>

I have also a custom empty 12px height footer

<ng-template #customFreeFloatingBar>
  <div class="footer">
  </div>
</ng-template>

[stephanrauh]

I wasn't aware the floating bar can be used as footer. Cool, thanks for pointing this out!

[stephanrauh]

Off topic: most buttons (every button except rotate) don't need an implementation. It suffices to give them the correct id, and pdf.js assigns the default task to the button. So I've simplified your template like so:

<ng-template #multiToolbar>
  <div class="header">
    <button mat-icon-button id="zoomIn">
      <mat-icon>zoom_in</mat-icon>
    </button>
    <button mat-icon-button id="zoomOut">
      <mat-icon>zoom_out</mat-icon>
    </button>
    <button mat-icon-button>
      <mat-icon>fullscreen</mat-icon>
    </button>

    <button mat-icon-button id="primaryPageRotateCw">
      <mat-icon>replay</mat-icon>
    </button>

    <div class="flex-spacer"></div>
    <button mat-icon-button id="print">
      <mat-icon>print</mat-icon>
    </button>
    <button mat-icon-button id="download">
      <mat-icon>download</mat-icon>
    </button>
  </div>
</ng-template>

I'm sure the same trick also works with the rotate buttons, but that wasn't your original question, so I put it aside for now.

[stephanrauh]

Your feature has landed with version 8.0.0-beta.7. It was more difficult to implement than expected, so I'd appreciate it if you test it and tell me if it works.

Enjoy!
Stephan

[stephanrauh]

The sidebar, the findbar, and the secondary menu also need to use the new position.

[stephanrauh]

Solved with version 8.0.0-beta.8.

[raphael22]

Thanks, I'll give it a try soon.