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
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
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
>
http://jsbin.com/OzOhelAK/9#test
Thank you so much,
Chris
5 Answers, 1 is accepted
0
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
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
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
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
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
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!