This is a migrated thread and some comments may be shown as answers.

How to embed .pdf files properly

5 Answers 323 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 12 Jan 2014, 06:14 AM
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

5 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 13 Jan 2014, 07:25 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Max
Top achievements
Rank 1
answered on 17 Jan 2014, 05:56 AM
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
0
Kamen Bundev
Telerik team
answered on 21 Jan 2014, 01:41 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
beauXjames
Top achievements
Rank 2
answered on 04 Sep 2015, 04:31 PM
Is there any additional support or information available via Telerik for supporting pdf rendering/display in other layout entities, such as kendoWindow?
0
Petyo
Telerik team
answered on 08 Sep 2015, 02:25 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Chris
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Max
Top achievements
Rank 1
beauXjames
Top achievements
Rank 2
Petyo
Telerik team
Share this question
or