# Disable page DropShadow

**URL:** https://pdfjs.community/t/disable-page-dropshadow/2397
**Category:** Technical Support
**Tags:** pdfjs-express
**Created:** [February 26, 2023, 11:55am UTC](https://pdfjs.community/t/disable-page-dropshadow/2397 "2023-02-26T11:55:40Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Maximilian.beck](https://avatars.discourse-cdn.com/v4/letter/m/46a35a/32.png) [@Maximilian.beck](https://pdfjs.community/u/Maximilian.beck)
#### Post date: [February 26, 2023, 11:55am UTC](https://pdfjs.community/t/disable-page-dropshadow/2397/1 "2023-02-26T11:55:40Z")

</div>

**Which product are you using?**  
PDF.js Express Viewer

**PDF.js Express Version**

| UI version | ‘8.7.0’ |
| --- | --- |
| Core version | ‘8.7.1’ |
| webviewer.min.js | ‘8.7.1’ |
| Build | ‘MS8yMC8yMDIzfGIzYTExOTI2Yw==’ |
| WebViewer Server | false |
| Full API | false |

**Detailed description of issue**  
I want to disable the drop shadow of the pages programatically, therefore I can not hardcode it using CSS.  
I tried the following method:

```js

      instance.Core.documentViewer.addEventListener('documentLoaded', () => {
          const $pages = iframeDoc.querySelectorAll<HTMLElement>('.pageContainer')
          $pages.forEach($page => {
            $page.style.setProperty('box-shadow', 'none')
            $page.style.setProperty('background-color', 'none')
          })

```

but unfortunately this only works on the first page. the other pages still have the shadow. Is there any event that gets fired when a page is loaded so I can rerun the script? I could not find it. Is there any other preferred way of disabling the dropshadow?

**Expected behaviour**  
Disable dropshadow of pages

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

**Code snippet**

```js

      instance.Core.documentViewer.addEventListener('documentLoaded', () => {
          const $pages = iframeDoc.querySelectorAll<HTMLElement>('.pageContainer')
          $pages.forEach($page => {
            $page.style.setProperty('box-shadow', 'none')
            $page.style.setProperty('background-color', 'none')
          })

```

---

<div class="post-metadata">

### Author: ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)
#### Post date: [February 27, 2023, 5:27pm UTC](https://pdfjs.community/t/disable-page-dropshadow/2397/3 "2023-02-27T17:27:21Z")

</div>

Hello Maximilian.beck,

Try using:

```javascript
const pages = document.querySelectorAll('.pageContainer')

```

This worked for me on the demo page.

Best regards,  
Tyler Gordon

---

<div class="post-metadata">

### Author: ![Maximilian.beck](https://avatars.discourse-cdn.com/v4/letter/m/46a35a/32.png) [@Maximilian.beck](https://pdfjs.community/u/Maximilian.beck)
#### Post date: [February 27, 2023, 6:34pm UTC](https://pdfjs.community/t/disable-page-dropshadow/2397/4 "2023-02-27T18:34:01Z")

</div>

Hi Tyler,

Thanks for your reply. I may have multiple pdfs on one page, where I only want to hide the shadow on some of them, therefore I need to work on the specific iFrame.  
Any idea on how to achieve that?

---

<div class="post-metadata">

### Author: ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)
#### Post date: [February 27, 2023, 7:05pm UTC](https://pdfjs.community/t/disable-page-dropshadow/2397/5 "2023-02-27T19:05:20Z")

</div>

Hello Maximillian.beck,

If you wanted to fully customize how the pages are rendered you could listen to the [pageComplete event](https://pdfjs.express/api/Core.DocumentViewer.html#event:pageComplete) which returns the canvas of the page being rendered.

However you could also just filter the list of pages from

```javascript
const pages = document.querySelectorAll('.pageContainer')

```

with

```javascript
const filteredPages = pages.filter((page)=>{
    return page.id === 'pageContainer6' || page.id === 'pageContainer7'
})

```