# Managing the width of the PDF

**URL:** <https://pdfjs.community/t/managing-the-width-of-the-pdf/1502>\
**Category:** Technical Support\
**Created:** [March 25, 2022, 2:25pm UTC](https://pdfjs.community/t/managing-the-width-of-the-pdf/1502 "2022-03-25T14:25:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![marco](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/marco/32/720_2.png) [@marco](https://pdfjs.community/u/marco)\
**Post date:** [March 25, 2022, 2:25pm UTC](https://pdfjs.community/t/managing-the-width-of-the-pdf/1502/1 "2022-03-25T14:25:48Z")

</div>

Hi there,

I use pdf.js viewer.

**Detailed description of issue**  
The PDF file is displayed without respecting the defined width:  
style={{“width”:“1024px”,“height”:“600px”,“margin”:“0 auto”}}

**Expected behaviour**  
[Click here for the PHP page with PDF.JS snippet.](https://www.emozioni.ch/articoliCopia.php?Articolo=202203007&Titolo=LeadershipGentileOChurl&Scrittore=Marco%20Silvio%20J%C3%A4ggi&Numero=7)

**Does your issue happen with every document, or just one?**  
This happens for all PDF files.

**Link to document**  
“Sorry, new users can only put 2 links in a post.”  
emozioni.ch/assets/art/202203007.pdf

**Code snippet**

```javascript
            <div class="row">
                <div class="col-sm-2">
                    <a href='<?php echo $NrPdf ?>' target="_blank">
                        <img src='<?php echo $Immagine ?>' style="width:100%">
                    </a>
                </div>
                <div class="col-sm-8">
                     <p>
                        <div id='articolo' style={{"width":"1024px","height":"600px","margin":"0 auto"}}></div>
                        <script>
                            WebViewer({
                                path: 'assets/z-js-pdf-viewer/lib', 
                                licenseKey: 'arVby9MhRLuYsJFEjhf8',
                                initialDoc: '<?php echo $Articolo ?>',
                                }, document.getElementById('articolo'))
                                .then(instance => {
                                    const docViewer = instance.docViewer;
                                    const annotManager = instance.annotManager;
                                    docViewer.on('documentLoaded', () => {
                                    });
                                });
                         </script>
                        <br/>
                        <br/>
                    </p>
                </div>
                <div class="col-sm-2"></div>
                <?php include 'assets/php/space.html';?>
                <?php include 'assets/php/space-emozioni-violet.html';?>
                <?php include 'assets/php/space.html';?>
            </div>

```

Thanks a lot!

Marco

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [March 25, 2022, 2:25pm UTC](https://pdfjs.community/t/managing-the-width-of-the-pdf/1502/3 "2022-03-25T14:25:53Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Customizing PDF.js Express Viewer - Get started](https://pdfjs.express/documentation/ui-customization/overview#get-started)
- [Manually download and integrate PDF.js Express Viewer - Integrate into your application](https://pdfjs.express/documentation/get-started-viewer/manually#integrate-into-your-application)
- [PDF.js Express Viewer Overview - What is PDF.js Express Viewer?](https://pdfjs.express/documentation/get-started-viewer#what-is-pdf.js-express-viewer?)

APIs:
- [Core.Annotations.Forms.Field - new Field(name [, options])](https://pdfjs.express/api/Core.Annotations.Forms.Field.html#Field__anchor)
- [Core.DocumentViewer - getPageWidth(pageNumber)](https://pdfjs.express/api/Core.DocumentViewer.html#getPageWidth__anchor)
- [PDF.js Express Utilities](https://pdfjs.express/api/utils/index.html#__anchor)

Forums:
- [Want to get the selected picture](https://pdfjs.community/t/want-to-get-the-selected-picture/753/1)
- [Issue with importing radio buttons in pdf](https://pdfjs.community/t/issue-with-importing-radio-buttons-in-pdf/821/3)
- [Can we get width and height of canvas that we have our pdf in?](https://pdfjs.community/t/can-we-get-width-and-height-of-canvas-that-we-have-our-pdf-in/308/2)

---

<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:** [March 29, 2022, 7:28pm UTC](https://pdfjs.community/t/managing-the-width-of-the-pdf/1502/4 "2022-03-29T19:28:12Z")

</div>

Hey there!

The width you have set there just controls the width of the entire WebViewer application, not the width of the document.

You can make the document fit the entire width of the viewer by changing the FitMode like so:

```javascript
instance.Core.documentViewer.addEventListener('documentLoaded', () => {

    instance.UI.setFitMode(instance.UI.FitMode.FitWidth)

  })

```

Thanks!  
Logan