Do you have an issue with a specific file(s)? Yes
Can you reproduce using one of our samples or online demos? Yes
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No
Please give a brief summary of your issue:
Move Page Number to a different area of the viewer
Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
The Page number <X/X> appears centered near the bottom of the viewer. Is there a way to move this page number to a different part of the viewer programatically. Such as somewhere near the top of the viewer ?
Please provide a link to a minimal sample where the issue is reproducible:
You can see the page number in the Apryse showcase, but our users want us to move it near the top so that they don’t have to scroll down to see it.
You should be able to do this (within the iframe):
elem = document.querySelector(“div[data-element=‘pageNavOverlay’]”);
elem.style.position = ‘absolute’;
elem.style.top = “-500px”;
elem.style.right = “200px”;
elem.style.left = ‘unset’;
elem.style.transform = ‘unset’;
elem.style.background = ‘purple’;
@rasdan is correct, the most straightforward approach would be getting the element via its data-element and modifying the style as necessary. Thanks for the assist!
If you run into any issues implementing this, feel free to reach out.
Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer Apryse Software Inc.
Where in the iframe should I call this code from ? I tried adding it to the documentLoaded eventlistener, but the data-element for pageNavOverlay does not exist in that scope. document.querySelector returns null.
For some reason, the iframeWindow is undefined and I’m not able to get a reference to the element. .document cannot be referenced. I definitely have a reference to instance.UI as i can see that populated in dev tools.
Here’s a screenshot attachment of the error and my full code page.
I found the root cause for the iframeWindow component not being populated. Turns out we were not instantiating the WebVewer object properly according to the Apryse documentation.
Once, we corrected that, this is now working as expected. My apologies for this since it was caused by our code.
Many thanks to you for your support and assistance,