# LayoutMode Not Working

**URL:** <https://pdfjs.community/t/layoutmode-not-working/351>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [October 21, 2020, 6:39pm UTC](https://pdfjs.community/t/layoutmode-not-working/351 "2020-10-21T18:39:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![nate.smith](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/nate.smith/32/118_2.png) [@nate.smith](https://pdfjs.community/u/nate.smith)\
**Post date:** [October 21, 2020, 6:39pm UTC](https://pdfjs.community/t/layoutmode-not-working/351/1 "2020-10-21T18:39:00Z")

</div>

**PDF.js Express Version**  
7.0.0

**Detailed description of issue**  
When setting up layoutMode to be Facing or FacingContinuous, we are still seeing the document setup using Single Page.

**Expected behaviour**  
When the document is opened and loaded, the document should be side by side with the pages, not single page scrolling.

**Link to document**  
Sorry, all documents are behind a login that we cannot provide to third parties.

**Code snippet**  
UI version: 7.0.0  
Core version: 7.0.0  
Build: Ny8yNy8yMDIwfGU4NWY2OTY=  
WebViewer Server: false  
Full API: false

Please let me know if you need any additional information from me!

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [October 23, 2020, 2:13pm UTC](https://pdfjs.community/t/layoutmode-not-working/351/2 "2020-10-23T14:13:41Z")

</div>

Hi!

Could you please provide a code snippet showing how and when you are setting the layout mode.

Thanks!  
Logan

---

<div class="post-metadata">

**Author:** ![nate.smith](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/nate.smith/32/118_2.png) [@nate.smith](https://pdfjs.community/u/nate.smith)\
**Post date:** [October 23, 2020, 5:34pm UTC](https://pdfjs.community/t/layoutmode-not-working/351/3 "2020-10-23T17:34:28Z")

</div>

```
 initPdfViewer(event, instance, modalElement) {
    let clickedElement = event.currentTarget;
    let pdfUrl = clickedElement.dataset.pdfUrl;
    let activityId = clickedElement.dataset.activityId;
    let title = clickedElement.dataset.title;
    let layoutMode = clickedElement.dataset.layoutMode;

    // actions before modal load
    modalElement.querySelector('.modal-title').innerHTML = title;
    $(modalElement).modal({backdrop: 'static'});

    if(layoutMode !== '') {
        instance.setLayoutMode(layoutMode);
    }
    instance.enableFeatures([instance.Feature.Download]);
    instance.loadDocument(pdfUrl, {
        'documentId':activityId,
        'extension':'pdf'
    });
}

WebViewer({
        licenseKey: this.pdfJsLicenseKey,
        path: '/includes/pdfjs', // point to where the files you copied are served from
        disabledElements: [
            'toolsHeader',
            'ribbons',
            'selectToolButton',
            'toggleNotesButton',
        ]
    }, pdfViewElement).then((instance) => {
        let elementList = document.querySelectorAll('.init-pdf-inline');
        for (let a = 0; a < elementList.length; a++) {
            elementList[a].addEventListener('click', (event) => {
                event.preventDefault();

                let self = this;
                instance.closeDocument().then(function(){
                    self.initPdfViewer(event, instance, pdfModalElement);
                });

            }, false);
        }
    });

```

We are using all possible config options from a column in our DB.

Cover  
Continuous  
Facing  
FacingContinuous

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [October 26, 2020, 2:15pm UTC](https://pdfjs.community/t/layoutmode-not-working/351/4 "2020-10-26T14:15:39Z")

</div>

Hey there!

I cannot reproduce your issue in 7.1.2.

Can you please make sure that the value of `layoutMode` is what you expect it to be? Also if you’re able, try upgrading to 7.1.2.

Let me know if you still have issues.

Thanks!  
Logan

---

<div class="post-metadata">

**Author:** ![nate.smith](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/nate.smith/32/118_2.png) [@nate.smith](https://pdfjs.community/u/nate.smith)\
**Post date:** [October 27, 2020, 1:51pm UTC](https://pdfjs.community/t/layoutmode-not-working/351/5 "2020-10-27T13:51:59Z")

</div>

We will try upgrading and see if that resolves the issue. The layoutMode seems to be being set fine, we did notice the values did change for layoutMode at some point recently in your library.

---

<div class="post-metadata">

**Author:** ![nate.smith](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/nate.smith/32/118_2.png) [@nate.smith](https://pdfjs.community/u/nate.smith)\
**Post date:** [October 28, 2020, 3:08pm UTC](https://pdfjs.community/t/layoutmode-not-working/351/6 "2020-10-28T15:08:48Z")

</div>

Unfortunately upgrading to 7.1.2 did not resolve this issue for us. Could it somehow be the document itself? It seems to only happen with certain PDF documents, not all within our website.

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [October 28, 2020, 3:20pm UTC](https://pdfjs.community/t/layoutmode-not-working/351/7 "2020-10-28T15:20:47Z")

</div>

Hmm its a bit hard to tell. Are there any errors in the console when it doesn’t work?

It sounds like it could also be a timing issue somewhere. Can you try calling `setLayoutMode` inside the document complete event?

```javascript
instance.loadDocument(pdfUrl, {
        'documentId':activityId,
        'extension':'pdf'
    });

instance.docViewer.one('documentLoaded', () => {
   if(layoutMode !== '') {
        instance.setLayoutMode(layoutMode);
    }
})

```

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![nate.smith](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/nate.smith/32/118_2.png) [@nate.smith](https://pdfjs.community/u/nate.smith)\
**Post date:** [October 28, 2020, 6:38pm UTC](https://pdfjs.community/t/layoutmode-not-working/351/8 "2020-10-28T18:38:22Z")

</div>

Moving setLayoutMode into the documentLoaded listener solved our problem! We used what was the README on how to implement the pdf viewer. It may be helpful to others who have larger PDF documents to use the documentLoaded.

Thanks for the help! If anything else comes up with this we will reply on this thread.

---

<div class="post-metadata">

**Author:** ![nate.smith](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/nate.smith/32/118_2.png) [@nate.smith](https://pdfjs.community/u/nate.smith)\
**Post date:** [October 28, 2020, 7:19pm UTC](https://pdfjs.community/t/layoutmode-not-working/351/9 "2020-10-28T19:19:41Z")

</div>

![Screen Shot 2020-10-28 at 3.19.12 PM](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/4c8aabd0da5d00c26aa14d6673a4cacb9912eb19.png)

We are seeing these new js errors with the upgraded version, but nothing seems to be breaking…such as the page or document.

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [October 28, 2020, 7:45pm UTC](https://pdfjs.community/t/layoutmode-not-working/351/10 "2020-10-28T19:45:46Z")

</div>

This is a known issue and will be fixed in the next release!

Thanks,  
Logan