0

Here I'm getting scroller in y-axis... actually I need to set the height based on the pdf height

<iframe title='Introduction' className='iframe-section' src="Docs/Introduction.pdf" frameBorder="0" scrolling="no"></iframe>

#css

#css
.iframe-section{
    width: 100%;
    height: 100vh;
}

I tried to change the height: 100% but I'm not able to display the pdf based on its height

enter image description here

Here I want to change the,

1) scrolling in y-axis

2) height based on the pdf height

3) black background

Labeeb OPC
  • 21
  • 7
  • 1
    _"I need to set the height based on the component (pdf) height"_ - your PDF is not a "component", the rendering of it has nothing whatsoever to do with your react app. If(!) your browser renders this by dynamically creating an HTML document that somehow has the PDF embedded, then you could try to read the height of that document, and apply it to your iframe element. – CBroe Aug 01 '22 at 10:49
  • @CBroe.... I deleted the word "component" ... but how can i read the height? – Labeeb OPC Aug 01 '22 at 10:55
  • https://stackoverflow.com/questions/3846132/jquery-get-height-of-iframe-content-when-loaded – CBroe Aug 01 '22 at 10:58

1 Answers1

1

1) Scrolling is a Hardware setting and browser cant change the OS behaviors, so each browser application has its own means to relay hardware values to html behavior. enter image description here

2) An iFrame used for wrapping a PDF extender generally cannot be dynamic since the page will not exist until after the content has been downloaded then decompressed, so chicken and egg if its nothing to show at first load, you need to set the viewport scale first and 100% high is 100% of null.

For that reason an iFrame has a minimum default (which would be fixed per browser), however seem to recollect practical is about 200 pixels.

enter image description here

Definition and Usage The height attribute specifies the height of an < iframe >, in pixels. The default height is 150 pixels. Browser Support Syntax < iframe height=" pixels " >

3) Any colour the viewer supports is set in the viewer enter image description here

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