Responsive Document/Page. Mission accomplished, But with a hack... Other solutions?

Before you start - checklist

• 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 are you trying to achieve? Please describe.

I would like to make a responsive Document, meaning that if I resize the window, the document and its pages would also resize. I know it’s possible, and tried to mimic what is done in the sample file, but It’s very possible that I missing something, or maybe I have a CSS rule conflicting maybe.

Describe solutions you’ve tried

I was able to achieve what I wanted to accomplish, but I had to apply a css rule to my html and body tag. The successful result is available on my website, on this link Resume PDF, and its whole code is open source here: Sandro Portfolio.

On desktop, and mobile, the rendering is good, as we can see below:

Its currently working, thanks to this css rule added to html and body:

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

If I remove overflow-x: hidden;, then its rendering the PDF, but it creates a huge white space on the right side, completely outside of the body output. It’s not even the html tag, and the whole screen is scrollable horizontally. This white space is there only for small screen (mobile or very small window). I have no clue what creates that behavior, and I was hoping that it would be possible to achieve this without setting that rule: overflow-x: hidden;. The sample doesn’t seem to do it either.

Here a screenshot of the result when the overflow rule is removed:

Why is that behavior happening? It seems like the PDF is breaking my html / body content. I would assume that it wouldn’t impact the parents (div / component).

Additional information The Resume page code is all in the folder of the component Resume on the repo here.

ResumePage.js

import React, { Component } from 'react';

import { Document, Page, pdfjs } from 'react-pdf/dist/entry.webpack';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

import './ResumePage.css';
import 'react-pdf/dist/Page/AnnotationLayer.css';

import pdfFile from '../../public/SandroResume.pdf';

class ResumePage extends Component {
    state = {
        file: pdfFile,
        numPages: null,
        pageNumber: 1,
    }

    onDocumentLoadSuccess = ({ numPages }) => {
        this.setState({ numPages });
    }

    render() {
        const { file, pageNumber } = this.state;
        return (
            <div id="ResumeContainer">
                <Document className={"PDFDocument"} file={file} onLoadSuccess={this.onDocumentLoadSuccess}>
                    <Page className={"PDFPage PDFPageOne"} pageNumber={pageNumber} renderTextLayer={false} renderInteractiveForms={false} />
                    <Page className={"PDFPage"} pageNumber={pageNumber + 1} renderTextLayer={false} renderInteractiveForms={false} />
                </Document>
            </div>
        );
    }
}

export default ResumePage;

ResumePage.css

#ResumeContainer {
    margin:auto;
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.PDFDocument {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.PDFPage {
    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
}

.PDFPageOne {
    margin-bottom: 25px;
}

.PDFPage > canvas {
    max-width: 100%;
    height: auto !important;
}

Question on the fly: Where is the best place for doing that instruction:

import { pdfjs } from 'react-pdf/dist/entry.webpack';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

It’s currently lives in the ResumePage.js. But Im wondering if there is a recommended place to do it? The main component of the React app (App.js) ? Or it’s okay the way I did it?

Environment

• Browser: Chrome 71.0.3578.98
• React-PDF version: 4.0.2
• React version: 16.7.0
• Webpack version: 4.28.4

[rjhilgefort]

Thanks for this! It might be a hack, but it got the job done for me! 🙏 🙏 🙏

[pxFIN]

FYI

https://github.com/pxFIN/react-router-express-node-example

Check my MyPDF component for one way of doing it (its very rude example without individual page sizes but for resizing purposes)