I am working on a project using the C# MvC .NET 4.0 framework with razor.
I have recently jumped onto the bootstrap bandwagon (Bootstrap v3.3.4 )in order to make our website responsive. I have been trying to find a solution for making pdf's appear as a pop up once clicked. This pop up would need to be scrollable / closable.
I have investigated two approaches:
Embedding PDF's inside the bootstrap modal with an object tag. This was only partially successful: I encountered the following trhee issues whilst browsing and scrolling pdf's embedded in modals on actual mobile devices (iPhone 4S, Safari / Chrome):
For what its worth, below is my .cshtml modal code:
<div> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open PDF</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body scroll"> <object type="application/pdf" data="http://www.inkwelleditorial.com/pdfSample.pdf" width="500" height="650">this is not working as expected</object> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>
So the way I see it, either I find a way to return pdfs in a scrollable pop up fancybox / partial view or I find a way to fix the scrolling and reliability issues with the modal as it already works partially, but not reliably as stated above.
Any alternative suggestions as to how to get pdf's to work reliably as pop up's on mobile devices would be greatly appreciated.