Customize ScaleOverlayContainer

Technical Support WebViewer
, ,
1

WebViewer Version: v11.1.0

Do you have an issue with a specific file(s)? No
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:

Hello, my goal is to hide the ‘scale-overlay-header’ within the data-element ‘scaleOverlayContainer’, so that when enabling a measurement tool and this overlay appears, I wish to only see the ‘MeasurementDetail’ portion of this overlay. I will be programmatically managing scales defined and set by a user.

Some additional details I came across:
The only data-element available around this overlay is the entire container itself (scaleOverlayContainer), this will hide the measurement details.
During a ‘VISIBILITY_CHANGED’ event, when this scale overlay container is triggered to be displayed, there is an element called ‘measurementOverlay’ that appends the measurement details portion I would like to see. Trying a instance.UI.openElements(['measurementOverlay']) does not display anything.

An alternative approach would be to disable the dropdown menu in the ‘scale-overlay-header’ and have it display the active scale or selected annotation’s scale. Along with possibly renaming the “Scale” string in this header to be “Active Scale”

Thank you for reading, open to thoughts

2

Hello Makoa,

You can hide the ‘scale-overlay-header’ by changing the CSS properties.
Here is a guide on how to customize styles in the viewer: Custom JavaScript PDF Viewer UI Style: Buttons, Panel, Modal | Apryse documentation

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

In the CSS file, you can add the following to hide the div.

.scale-overlay-header {
  display: none !important;
}

Best Regards,
Darian

3

Hi Darian, this worked for me. Adding the !important was necessary, will keep that in mind!

Thanks,
Makoa