Extra space appears below toolbar in small screen size


PDF.js Express Version

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

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

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

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