1

I am using NextJS and react-pdf/renderer and my tool creates a PDF and I'd like to display it with the PDFViewer component.

The Viewer loads but only takes up a small part of the screen. Whenever I change the 'width' and 'height' attribute with relative values (100%, 100vh), it won't take it. The only way to force it, is to put specific pixel values in it, but that defeats the purpose of being responsive to the screen size.

Sandbox that reproduces my issue: https://stackblitz.com/edit/nextjs-su5bi1?file=pages/index.js

https://user-images.githubusercontent.com/11639100/185731253-59622a95-b7f4-450b-9d8f-5bec0573cfd6.png

Does anyone have an idea why this is happening?

kftb
  • 117
  • 2
  • 11

2 Answers2

1

Here is your screen with a red block of pixels of 150 pels high, note how it matches exactly your frame height.

enter image description here

Generally you ONLY set frame height in pixel units (The cross browser default minimum is 150?) you probably need somewhere to set a style defining the height as a different number of pixels.

NOTE due to unknown HTML border values you can use a dynamic Viewport setting where I would recommend 95% of horizontal and vertical view to avoid extra scrollbars thus

<PDFViewer width="95vw" height="95vh">

It WILL vary depending on viewport conditions from browser to browser at any higher percentage. Here a browser viewer is eating up 32 pixels of height for offsetting so if the remainder is 100%-32 you could need to start doing browser specific calcs.

enter image description here

see comment 2 in https://stackoverflow.com/a/73201090/10802527

K J
  • 8,045
  • 3
  • 14
  • 36
0

You just need to set the height property in the style for the

<PDFViewer style={{width:"100%", height:"100vh"}}>

and this should set the height for PDF viewer component to the height of your screen.

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
mina hany
  • 1
  • 2