Customize zoom-dropdown

[YevheniiKondratiev]

Hi guys!
I use ngx-extended-pdf-viewer with "20.5.2" version.

I have a problem with customizing zoom-dropdown, because your dropdown has a cross-browser issue with styles inconsistencies, cause it uses common browser-specific styles and can't be changed using CSS. I tried to write a new HTML code for dropdown using ngx-extended-viewer ids, but it doesn't work, unfortunately.

Here an example of my code:

    <pdf-zoom-out/>
        <mat-select id="scaleSelect" (selectionChange)="changeZoom($event)">
          <mat-option id="pageFitOption" value="page-fit" data-l10n-id="pdfjs-page-scale-fit">Page fit</mat-option>
          <mat-option id="pageWidthOption" value="page-width" data-l10n-id="pdfjs-page-scale-width">Page Width</mat-option>
          <mat-option value="0.5">50%</mat-option>
          <mat-option value="0.75">75%</mat-option>
          <mat-option value="1">100%</mat-option>
          <mat-option value="1.5">150%</mat-option>
          <mat-option value="2">200%</mat-option>
        </mat-select>
        <pdf-zoom-in/>

Also, I tried to change zoom manually through pdfVIewer viewChild like this, but is also doesn't work:

this.pdfViewer.zoom = 'page-fit';
    this._pdfViewerService.recalculateSize();

Maybe I hasn't found the right way to solve my problem, if you don't have a solution, I think I create an issue

[stephanrauh]

I'm afraid I haven't understood your problem.

• Which cross-browser issues did you encounter?
• What did you try to fix it?

As for setting the zoom: there's a two-way binding attribute for that. Just use "[zoom]="myZoom" in the HTML template and set "myZoom='page-fit' in the TypeScript code. Here's a live demo: https://pdfviewer.net/extended-pdf-viewer/zoom

[YevheniiKondratiev]

Ok, I see two-way binding variable, maybe I missed it, sorry. I will try to implement mat-select again

What I mean about cross-browser issue and what I try to fix:

• Google Chrome:

• Mozilla Firefox:

[YevheniiKondratiev]

I've implemented with two-way binding zoom variable and material select, thank you!

[stephanrauh]

I can see that your screenshot use different fonts. However, when I open the zoom dropdown in Firefox, it looks entirely different from your screenshots. The two buttons are on the left-hand side of the dropdown. So I guess your issue was about a custom component.

Be that as it may, I understand you've been able to solve the issue. Hooray!