pageNavOverlay always visible

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
Core version: “8.7.4”
UI version: “8.7.0”

Detailed description of issue
Make the pageNavOverlay (showing at the bottom of the page) static i.e. always visible

2

Hello Retrotech,

You can keep the pageNavOverlay visible by changing the CSS properties.
Here is a guide on how to customize styles in the viewer: PDF.js Express Viewer Style Customization (Color & CSS) | Documentation

WebViewer(
  {
    licenseKey: 'YOUR_LICENSE_KEY',
    path: 'lib',
    css: 'path/to/stylesheet.css'

​ },

In the CSS file, you can add the following snippet to ensure the pageNavOverlay doesn’t disappear.

.PageNavOverlay {
    opacity: 1!important;
}

Best Regards,
Darian

3

I couldn’t get it to work with the CSS path. Maybe the reference path was wrong. Instead I used the below

const iframeDoc = instance.UI.iframeWindow.document;
const querySelector = iframeDoc.querySelector('[data-element="pageNavOverlay"]');
querySelector.style.opacity = 1
querySelector.style.visibility = 'visible';
4

Hi there,

The CSS path reference is likely incorrect. If you are using a React project, I think the file will have to be in the public folder.

If your file is in ‘public/files’ then the constructor should be:

css: '/files/custom.css',

We recommend using this approach instead of the iframe way.

Best Regards,
Darian