Why is my DocumentContainer so small?

Technical Support
1

I’m using latest version of PDF.js Express and following the manual integration example from here

But my viewer appear tiny ( see screenshot here )

What am I doing wrong ?! here’s my html :

<!DOCTYPE html>
<html>
<head>
  <title>PDF.js Express Viewer</title>
</head>
<!-- Import PDF.js Express Viewer as a script tag from the lib folder using a relative path -->
<script src='pdfjsexpress/lib/webviewer.min.js'></script>

<body>
<div id='viewer' style={{"width":"1024px","height":"600px","margin":"0 auto"}}></div>
  
  
<script>
WebViewer({
    path: 'pdfjsexpress/lib', // path to the PDF.js Express'lib' folder on your server
    initialDoc: 'pdfs/sample.pdf', // lidl
}, document.getElementById('viewer')).then(instance => {
    // now you can access APIs through the WebViewer instance
    const { Core, UI } = instance;
    
    //instance.UI.setTheme('dark');

    // adding an event listener for when a document is loaded
    Core.documentViewer.addEventListener('documentLoaded', () => {
        console.log('document loaded');
    });

    // adding an event listener for when the page number has changed
    Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
        console.log(`Page number is: ${pageNumber}`);
    });
});
</script>
</body>
</html>
2

Hello pdfjs.express,

The container’s CSS wont allow the Viewer’s CSS to fill the container.

Please review your CSS!

Best regards,
Tyler

3

Thanks I figured it out, it might be an idea to reference the required css file in the example page though.

4

Hi,

I have same problem. How did you fix it?

Thanks.

5

Hello ufuk,

This depends on how youve implemented your CSS. Check the width/height of the container and the parent container to ensure it can expand to fill the container.

Best regards,
Tyler

1 Like