-
Notifications
You must be signed in to change notification settings - Fork 182
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow for multi-line toolbars #632
Comments
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? |
<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> |
I wasn't aware the floating bar can be used as footer. Cool, thanks for pointing this out! |
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. |
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! |
…g to deactivate form support. Use the feature at your own risk - currently there's no way to detect forget signatures! #632 allow for multi-line custom toolbars
…ures can be displayed without having to deactivate form support. Use the feature at your own risk - currently there's no way to detect forget signatures! stephanrauh/ngx-extended-pdf-viewer#632 allow for multi-line custom toolbars
The sidebar, the findbar, and the secondary menu also need to use the new position. |
Solved with version 8.0.0-beta.8. |
Thanks, I'll give it a try soon. |
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
The text was updated successfully, but these errors were encountered: