Extra space appears below toolbar in small screen size

Technical Support
1

Hi,

PDF.js Express Version
8.0.0

Detailed description of issue
We have disabled the header items as below:
[“viewControlsDivider1”, “rotateHeader”, “rotateClockwiseButton”, “rotateCounterClockwiseButton”, “ribbons”, “stickyToolButton”, “highlightToolButton”, “freeHandToolButton”, “freeTextToolButton”, “menuButton”, “Comments”, “toggleNotesButton”, “annotationCommentButton”, “annotationStyleEditButton”, “linkButton”, “toolsHeader”]

When the browser screen width is above 956px the pdf toolbar shown is as expected, attached image normal.png

normal
normal731×327 4.02 KB

. When its resized to below 956px an extra row apeears below the normal toolbar, attched image small.png
small
small751×327 4.03 KB

Expected behaviour
Extra row to be not visible, should be as image normal.png

Does your issue happen with every document, or just one?
All documents

2

Hi Pankaj,

This is a known issue and should be fixed in the upcoming 8.1 release. While you wait there is a couple of workarounds you can do to hide that element. The first workaround is you can use the querySelector to change the height like so:

    const viewerDocument = instance.UI.iframeWindow.document;
    const toolsHeader = viewerDocument.querySelector('[data-element="toolsHeader"]');
    toolsHeader.style.height = "0px";

Or you can use a custom CSS file to change the height as well. You can follow this guide to use custom CSS files: PDF.js Express Viewer Style Customization (Color & CSS) | Documentation

Cheers,
Dustin