Zoom Button is wrongly placed

[andreadada]

With width <= 597 the Zoom Button takes place behind the last PDF page at the bottom. I've tried to listen to resize and call pdfViewer.hideZoom(true) if width is under 597 but does not work.

Edit: This bug can be reproduced in the Online Demo too.

Edit 2: I've tried to set the button z-index to an higer value and now it is sticked on bot (i assume it does what it was supposed to do), But i did only via CSS in the Page Inspector to test. Don't know how to do it in the code.

[paodb]

Hello, the component has a rule to accomodate the zoom button to be at the bottom when the width is < 600 (see method). When the small-size style it's added then the button should appear at the bottom, following these styling rules but that is making the button to be hidden. So, as you already pointed out, the z-index property is missing. The button is moved from the toolbar to make sure the rest of the toolbar buttons are shown correctly (mobile in mind).

If you are using the theme approach to styled your application you can create a vcf-pdf-viewer.css file and add the missing styling. If I add

[part~="toolbar"].small-size [part~="toolbar-zoom"] {
    z-index: 99;
  }

Then the button will look like this:

If you're not using the themes approach, you can create a css file as well but use CssImport annotation to import the stylesheet. Like @CssImport(value = "./vcf-pdf-viewer.css, themeFor = "vcf-pdf-viewer"). I will add the missing z-index property but you can use these approaches until the fix is ready.

[paodb]

Please try version 3.0.0.