Responsive PDF with Annotations layer

• I have read documentation in README
• I have checked sample and test suites to see real life basic implementation
• I have checked if this question is not already asked

What am I trying to achieve?

I want the PDF Document to scale down as the screen size scales down so everything looks good on mobile, while still maintaining the annotations layer for clickable links.

Describe solutions I’ve tried

I have pretty much the same problem as this unresolved issue: https://github.com/wojtekmaj/react-pdf/issues/339 , I tried his solution and a few others, to no avail. I can get the document page to scale down, but the annotations layer is not scaling down with the page.

I don’t see anything that works with my setup, am I missing something to get the annotations layer to also be responsive?

My current code: pdf.css:

.react-pdf__Document {
   display: flex !important;
   justify-content: center !important;
}

.react-pdf__Page__canvas, .react-pdf__Page__annotations {
   max-width: 100% !important;
   height: auto !important;
}

.pdf-container {
   background-color: lightgray;
   padding: 1% 0 10px 0;
}

@media screen and (min-width: 901px) and (max-width: 1600px) {
   .pdf-container {
      padding: 5% 0 10px 0;
   }
  }

  @media screen and (min-width: 701px) and (max-width: 900px) {
   .pdf-container {
      padding: 10% 0 10px 0;
   }
  }

  @media screen and (max-width: 700px) {
   .pdf-container {
      padding: 20% 0 10px 0;
   }
  }

Article component:

 <React.Fragment>
    <div className="pdf-container">
        <Document
            file={this.props.article.pdfUrl}
            onLoadSuccess={this.onDocumentLoadSuccess}
        >
            <Page pageNumber={pageNumber} />
        </Document>
        <Grid fluid className="s-padding-t">
            <Row center="xs">
                <Col xs={12} sm={4} className="s-padding-b">
                    <button
                        type="button"
                        className="s-btn"
                        disabled={pageNumber <= 1}
                        onClick={this.previousPage}
                        >
                        <i className="fa fa-chevron-left"></i> Previous
                    </button>
                </Col>
                <Col xs={12} sm={4} className="s-padding-b">
                    <span>Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}</span>
                </Col>
                <Col xs={12} sm={4} className="s-padding-b">
                    <button
                        type="button"
                        className="s-btn"
                        disabled={pageNumber >= numPages}
                        onClick={this.nextPage}
                        >
                        Next <i className="fa fa-chevron-right"></i>
                    </button>
                </Col>
            </Row>
        </Grid>
    </div>
</React.Fragment>

Environment

• Browser (if applicable) [e.g. Chrome 57, Firefox 59]: Chrome 57
• React-PDF version: ^4.1.0
• React version: ^16.13.1

[oldboyxx]

Don’t fiddle with css, just set page width like this:

<div ref={documentWrapperRef}>
  <Document file="some_url">
    <Page
      width={documentWrapperRef.current?.getBoundingClientRect().width || undefined}
    />
  </Document>
</div>

[SavageWilliam]

@Dev-Dipesh

How did you handle fullscreen? Can’t see it in your example