React-pdf: Component PDFViewer: set props height to 100 % does not work

[JacobGeoGeek]

Describe the bug
Based on the react-pdf documention, you can set the props height for the PDFViewer. I was wondering is it possible to add a % for height ? I have also tried with the Width and this props accept the %.

here example with 100 %:

expected result ( I would like to have a PDF to be fully cover the page):

[agarciadarce]

could you solve it?

[JacobGeoGeek]

No i wasn't able to solve it

[agarciadarce]

Have you tried adding width and height property to pdfviewer? As I see if, it also tries to put those properties to the container of the pdfviewer

[JacobGeoGeek]

Yes I've set the height=100% and the width=100%

[agarciadarce]

I have an example where the pdfviewer works correctly, let me look it up.

[agarciadarce]

Do you have this like that?

[JacobGeoGeek]

after testing this syntax:

function App() { return ( <PDFViewer width={"100%"} height={"100%"}> <MyDocument /> </PDFViewer> ); }

I still have the same problem:

[JacobGeoGeek]

here's my MyDocument Component code (from the official documentation):

import React from "react";
import { Page, Text, View, Document, StyleSheet } from "@react-pdf/renderer";

// Create styles
const styles = StyleSheet.create({
page: {
  flexDirection: "row",
  backgroundColor: "#E4E4E4",
},
section: {
  margin: 10,
  padding: 10,
  flexGrow: 1,
},
});

// Create Document Component
export const MyDocument = () => (
   <Document>
       <Page size="A4" style={styles.page}>
           <View style={styles.section}>
              <Text>Section #1</Text>
           </View>
           <View style={styles.section}>
             <Text>Section #2</Text>
           </View>
       </Page>
</Document>
);

[andrewdourado]

My temporary solution is to use window.innerHeight instead 100%.

[JacobGeoGeek]

do you have example ?

[andrewdourado]

Just change height value in PDFViewer component:

<PDFViewer height={window.innerHeight} width="100%">
  <PDFDocument />
</PDFViewer>

[JacobGeoGeek]

it works, but the only (more UI related problem) is that their two scroll bars:

[andrewdourado]

Try this:

<PDFViewer
      style={{ position: 'absolute', border: 0, height: '100%', width: '100%' }}
>
   <PDFDocument />
</PDFViewer>

I insert border: 0 because of the edge browser.

Credits: https://stackoverflow.com/a/18665613

[JacobGeoGeek]

it works !