PDF not displayed when <pdf-app> is placed under a <div> element

Hi @sandanat , I’ve spent a lot of hours to determine, what’s the reason of not displaying PDF viewer in my Vue app. If you have any workaround for thiss issue, please provide.

Configuration:

• Web browser and it`s version: Firefox 86, Chrome 89
• Operating system and it`s version: Windows 10
• vue-pdf-app version: 1.0.1

Steps to reproduce the problem:

1. Use Typescript Example
2. In src/App.vue place <pdf-app> element into additional <div> element like this:

<template>
  <div id="app">
    <div>
      <pdf-app pdf="/sample.pdf"></pdf-app>
    </div>
  </div>
</template>

1. Build and run application, e.g. npm run serve
2. Display application in browser

What is the expected behavior? A PDF is displayed together with top menu.

What went wrong? PDF and menu are not displayed. No error in console. This issue completely prevents to use vue-pdf-app inside a Vue / Vuetify element which internaly creates <div> element.

[jan-kacina]

I consider this as solved - suggestion with style="height: 100vh;" works well.

Thanks for explanation.

[parmsnapsuite]

what if the pdf is inside the modal? and my modal is just half of the window size, applying 100vh makes the pdf go beyond the modal height.