How to embed .pdf files properly

[Chris]

Hi fellas,

my problem is relatively simple, I believe. I am trying to embed a pdf file and I have tried via object and iframe, but I can never force a 100% height. Why is that? Is there a workaround to do so? Right now I use 

<object data="file.pdf" type="application/pdf" width="100%" height="100%"></object>

and I only get about 100px height. By changing the style it does not work either. My problem can be viewed here:
http://jsbin.com/OzOhelAK/9#test

Thank you so much,
Chris

[Kamen Bundev]

Hello Chris,

The problem is that the flexbox our Views use while sizing correctly, does not actually set any height on its contents, thus height: 100% will not work out of the box, unless we set position: absolute to the object. Additionally there's the View Scroller that also prevens proper sizing, which we can easily remove with the View data-stretch="true" option. After doing these, everything works - check the modified demo.

Regards,
Kamen Bundev
Telerik

[Max]

Hello Kamen,

for our company it will also be important to embed .pdf files. Nevertheless, the demo you posted works for my Chrome browser, but once I upload the file to try it on my iOS devices data-stretch locks the view and I cannot scroll to the second page of the file. Is there a fix for mobile browsers?

Regards,
Max Meier

[Kamen Bundev]

Hello Max,

Unfortunately this is down to the way Mobile Safari is handling PDF viewing. There are no controls provided and in order to support scrolling, you will need to introduce a scrolling container and enable the native scrolling of the view. You should also specify the width and height of the PDF document in pixels (to show all its pages). Check the modified demo.

Regards,
Kamen Bundev
Telerik

[beauXjames]

Is there any additional support or information available via Telerik for supporting pdf rendering/display in other layout entities, such as kendoWindow?

[Petyo]

Hello,

 

this thread discusses problems specific to mobile devices, but in general, Kendo UI does not provide any PDF specific rendering solution. This being said, you should not have any issues embedding something like pdf.js (or an iframe, for that matter) in a kendo window instance. 

 

Regards,
Petyo
Telerik