Bootstrap modal - adding an object tag embedding a PDF file

I'm currently trying to display a modal bootstrap in which I want to include a PDF file with an html object tag. The problem is that nothing is displayed.

I created jsFiddle ( http://jsfiddle.net/mV6jJ/3/ ).

So, you will find the base modal (exactly the same code from the boot for the basic modal display after clicking the button), and in the modal body you will find:

<object type="application/pdf" data="http://www.inkwelleditorial.com/pdfSample.pdf" width="500" height="500">this is not working as expected</object> 

Therefore, when I add this code alone (so not in the bootstrap module), it works as expected. It displays pdf in the default PDF viewer of the browser. But when I try to embed the PDF inside the boot mod, nothing appears.

If you have any ideas, this will really help me, many hours searching, and I saw solutions with a tag (which I do not want to use).

Thanks and best regards

+7
javascript jquery html css twitter-bootstrap
source share
3 answers

I found that bootstrap includes a css property that affects PDF viewing in a modal window.

Change this:

 .modal.in .modal-dialog { transform: translate(0px, 0px); } 

in

 .modal.in .modal-dialog { transform: none; } 

If this property is changed, everything works correctly.

You can see in action:

http://jsfiddle.net/mV6jJ/20/

+4
source share

Prevent Download : Again, if you have an Internet Download Manager or any other download manager that catches a PDF, automatically try to prevent it from automatically pdf linking.

Also check out PDFObject JS, this should be interesting

 <script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script> 

EDIT

Try iframe instead of pdf object type

 <iframe src="http://www.inkwelleditorial.com/pdfSample.pdf" width="500" height="500"></iframe> 

http://jsfiddle.net/mV6jJ/9/

+1
source share

Finally found a solution :) It was my browser-based PDF reader, which was not configured well. Firefox used Adobe Reader to display pdf. I replaced it with pdf.js (a PDF reader) and now everything works well :) Thank you very much for your time and help :)

0
source share

All Articles