Custom viewControls UI

[user38]

Which product are you using?
PDF.js Express Viewer

*PDF.js Express Version
8.1

Detailed description of issue
I want to change the UI of the viewControls so that instead of them in the overlay, they would be shown in the actual header itself. Is this possible?

Expected behaviour
This is how they currently look but I would like the overlay to be removed and for specific control buttons such as 'Rotate Clockwise, ‘Double Page’ etc to be in the actual header.

Does your issue happen with every document, or just one?

Link to document

Code snippet

[system]

Hello, I’m Ron, an automated tech support bot

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:

• Customize toolbar in viewer
• Hiding/Showing DOM elements in WebViewer UI - List of elements
• Core engine for WebViewer - Creating your own UI using WebViewer Core

APIs:

• UI.MenuOverlay
• UI.PageManipulationOverlay
• WebViewerInstance - new WebViewerInstance()

Forums:

• Moving Page Number tool in header
• Custom UI event button
• How to custom thumbnail control button?

[Logan]

Hey there!

Sorry for the delay here.

We don’t have an API to explicitly move those items into the header, but what you can do is hide the buttons from the dropdown menu and recreate them in the headers.

Someone asked a similar question here that you can reference (this is a PDFTron forum however the APIs are the exact same, so everything there is applicable to Express).

Here’s some additional documentation to help you:

• Removing/hiding items
• Customizing the header

Let me know if you need any additional help!

Logan