# Extra space appears below toolbar in small screen size

**URL:** <https://pdfjs.community/t/extra-space-appears-below-toolbar-in-small-screen-size/966>\
**Category:** Technical Support\
**Created:** [August 27, 2021, 6:39am UTC](https://pdfjs.community/t/extra-space-appears-below-toolbar-in-small-screen-size/966 "2021-08-27T06:39:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![pankaj](https://avatars.discourse-cdn.com/v4/letter/p/a9adbd/32.png) [@pankaj](https://pdfjs.community/u/pankaj)\
**Post date:** [August 27, 2021, 6:39am UTC](https://pdfjs.community/t/extra-space-appears-below-toolbar-in-small-screen-size/966/1 "2021-08-27T06:39:08Z")

</div>

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](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/5cb49a47f1f15d0fd3accda482bffc5f2146f343.png)  
. When its resized to below 956px an extra row apeears below the normal toolbar, attched image small.png ![small](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/b27837a001677273d381f4296887c465c08d5bea.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

---

<div class="post-metadata">

**Author:** ![driley](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@driley](https://pdfjs.community/u/driley)\
**Post date:** [August 30, 2021, 8:38pm UTC](https://pdfjs.community/t/extra-space-appears-below-toolbar-in-small-screen-size/966/2 "2021-08-30T20:38:41Z")

</div>

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:

```javascript
    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](https://pdfjs.express/documentation/ui-customization/customizing-styles#change-other-css-properties)

Cheers,  
Dustin