Ionic view with mobile WebViewer causes unnessecary scrollbar to appear

Steve Buck

unread,

Mar 1, 2016, 5:45:07 PM3/1/16

to PDFTron WebViewer

I am using Cordova/Ionic with the WebViewer. My app uses Ionic's side-menu and an ion-view/ion-content to display the WebViewer with "type: html5". This works nicely, except for the following issues:

1. The WebViewer automatically displays a vertical scrollbar that does nothing when I scroll it (it does not move the PDF). It is clearly the WebViewer's scrollbar because it is only within the WebViewer's space.

2. The WebViewer displays the PDF too low. The "grey" unused area above the PDF is much larger then the "grey" unused area below the PDF.

My guess is that the WebViewer is getting confused by the ion-nav-bar above it and not calculating the vertical space correctly. How do I fix this? Disabling the scrollbar doesn't seem appropriate because there seems to be a more fundamental problem since the page is actually sitting too low. I am new to JavaScript and HTML so clear code examples (if necessary) would be helpful. I can also provide a screenshot if necessary.

Anatoly Kudrevatukh

unread,

Mar 1, 2016, 6:37:51 PM3/1/16

to PDFTron WebViewer

Hello Steve,

If you could attach a screenshot of the problem it might be useful.

It sounds like maybe you're not setting the size of WebViewer correctly which is why it appears to be offset. the bottom is just being clipped so it looks like it isn't centered.

You could try adjusting viewer height/width. For example in custom signature sample (WebViewer\WebViewerJS\samples\custom-signature) viewer height is set to 100% like this: <div id="viewer" style="height: 100%; overflow: hidden;"></div>

You can't just set the width and height to 100% because it'll be 100% of the parent which will be too big. Instead you should have calc(100% - Npx), where N is the size of your side menu in pixels.

Steve Buck

unread,

Mar 3, 2016, 2:19:06 PM3/3/16

to PDFTron WebViewer

Hi again Anatoly,

This question is related to my other question:

https://groups.google.com/forum/#!topic/pdfnet-webviewer/y-fVCIvJsoQ

I am trying to find a way to get the WebViewer type:html5Mobile mode to work within my Ionic app. With this question, I'm trying to get it to work with mobileRedirect: false. I made your suggested changes, but the issue still occurs:

1. Running it just within a browser (ionic serve) works fine.

2. Running it in Ripple gives me the unnecessary scrollbar but the page slider is visible (image attached).

3. Running it on my actual iPad mini works fine when it is first displayed. However, if I rotate the device from portrait to landscape, the document drops low, the page slider does not appear, and there is no scrollbar. But even worse, if I rotate between portrait and landscape enough, it keeps dropping (in landscape only) until eventually it crashes.

I also just tried setting the height to something much smaller then the view (height: 500px). The same thing occurred.

test.png

Anatoly Kudrevatukh

unread,

Mar 4, 2016, 12:31:48 PM3/4/16

to PDFTron WebViewer

Unfortunately to have this work properly on iOS devices you'll need to set mobileRedirect: true in your WebViewer options so that the mobile viewer isn't displayed in an iframe.