Viewer opens in half-page

[11dev]

Issue description

When opening a pdf uploaded locally, the viewer apparently opens in half-page (actually its height is limited to 500px). The problem is that the iframe has been defined with:

• width="100%" (as attribute of the iframe html tag)
• min-height: 500px (as inline style for the iframe html tag)

What happens, actually? width="100%" says the browser to use all the height available for the iframe. This height is referred to the height of the container, i.e. div#pdfCanvasContainer. This div has no height set, so it spans on the natural height of its content. Its content is the iframe itself, which has a min-height of 500px. Thus, the result is a height of 500px, which is about half-page when the browser window is full screen and you're using a fullHD monitor with 1920x1080 resolution.

Fix

I fixed it on our instance by modifying the style attribute of the iframe in templates/display.tpl, adding to the min-height the following declaration:

height: calc(100vh - 40px)

This sets the iframe height to the same height of the whole page, subtracting the height of the header and the borders involved. To be more precise, those 40px could vary, depending on your site settings: in our installation, we kept the default bootstrap settings, and the header is about 28px high (font-size: 18px; line-height: 1.555), and both the div#pdfCanvasContainer and the iframe have a border of 1px (total 4px). Thus, 36px would suffice, but I added some pixels, just to keep clear.

[asmecher]

@jardakotesovec, can you have a look at this (or delegate it)? Thanks!

[blesildaramirez]

Hi @11dev , I tried to replicate this using stable-3_4_0 branch and I did not get the same problem. Also, during my investigation, I noticed that we set the height attribute to "100%" in the iframe, and the default theme (Bootstrap) includes a class that also sets the height to 100%.
This combination should ensure that the iframe fills the available space as intended.

Could you please let me know which application and version you were using when this issue occurred? A screenshot of the issue would also be helpful for further investigation. Many thanks!

[11dev]

Hallo @blesildaramirez , thank you for your attention. We're still on OJS version 3.3.0.19, due to some incompatibilities.
In our installation, an uploaded document appears as in the following screenshot:

As you can see, the iframe takes only half of the screen's height. If this has been corrected in version 3.4.0, I'm happy with this.
Anyway, a height of 100% can be misleading: in this case, as I already explained, a height of 100% for the iframe means "take all the height of the container", i.e. the height of the div with id="pdfCanvasContainer". But this div has no height set, so it depends on the space taken by its content. The only rule applying to the content, then, is a min-height of 500px for the iframe, and nothing else can be applied. So the iframe and the container are rendered with that height.
Hope it helps