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:

  1. Using a partial view / fancybox. Unfortunately all the examples that came up were purely ASP.NET, hence I could not find anything useful.
  2. 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):

    • Scrolling the PDF too aggressively could cause the modal to crash
    • Scrolling in the modal was unreliable, sometimes the background page would scroll instead of the actual modal. Upon zooming in or out it was often impossible to scroll at all.
    • Zooming in and out of the PDF was unreliable; only worked sometimes.

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">&times;</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.

Related posts

Recent Viewed