PDF cannot scroll in modal viewing in Ipad

HTML & CSS
1

Hi can I ask some help please, I have modal and it will display pdf my pdf has 2 pages . it works in browser I can scroll to next page.but when I tried to ipad it only show 1 page and I cannot scroll the pdf to go to next page.

      <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">My PDF</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                             
                                <embed src="path/to/my/pdf" style="width: 100%;height: 560px;border: none;">

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

Thank you in advance

2

Hi,

There seem to be many similar questions on Google and not many answers. It does seem to be a problem in ios.

To be honest I don’t have any knowledge of this issue but of you have a demo to look at I can test and see if it does scroll on my iphone etc.

Otherwise you could detect for touch with js and then don’t embed the pdf but simply link to the pdf in the usual way.

1 Like
3

Hi paul here is the sample of modal

here is my pen

Thank you in advance.

4

I don’t really understand it but there’s an article here that suggests doing this.

<iframe src="https://docs.google.com/gview?url=https://classics.berkeley.edu/sites/default/files/2020-01/sample.pdf&embedded=true" style="width: 100%;height: 560px;border: none;"></iframe>

That seems to make it work for me on the iphone and indeed on Safari Mac (which was also broken).

image
image750Ă—1334 120 KB

5

Hi Paul,

Thanks for the link I read the link and I put this code

  <div style="overflow:scroll !important; -webkit-overflow-scrolling:touch !important;">
                                    <iframe src="path/to/mypdf" style="width: 100%;height: 560px;border: none;"></iframe>
                                </div>

when I viewed it on Ipad 768x1024. only 1 page I can’t scroll also I remove the embed because my pdf cannot be found., but in mackbook safari works fine I can scroll.

In my android phone strange behaviour when modal shows , there is a button “open” and if I click the button it will open the pdf but not inside in the modal.

6

It seems the important part is the url that I added.

src="https://docs.google.com/gview? then the link to your pdf with embedded=true at the end

i.e.
src="https://docs.google.com/gview?url=https://classics.berkeley.edu/sites/default/files/2020-01/sample.pdf&embedded=true

Did you check my codepen on your ipad?

Your original did not work in Safari on the mac desktop but my codepen works in both iphone and desktop safari.

1 Like
7

Thank you so much Paul it works now :slight_smile:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.