Distance Measurement popup alignment

Technical Support
1

Which product are you using?
using PDF.js Express Plus 8.7.4

Does anyone know how to find this div in the DOM? I want to override the CSS and left align it because it clashes with the annotation list on the right hand side of the page.

image
image1284×723 40.1 KB

I can modify the css manually (but my changes will be wiped out on every update).
image

I’d prefer to do a manual override of the css (as per below), but I’m guessing about what the div is called (because I can’t locate it in the DOM).
image

Any clues would be very helpful thanks.

Justin

3

Hi there,

Thanks for contacting pdf.js express forums,

From your screenshot, it looks like you want to customize the positioning of the measurement popup overlay.
You can target this in your WebViewer code via targeting the DOM:

    const iframeDoc = instance.UI.iframeWindow.document;
    const measurementPopup = iframeDoc.querySelector('[data-element="measurementOverlay"]');

Or if you are targeting via CSS, you can use the stylesheet method
and in the CSS file, you can add something like:

.MeasurementOverlay{
    border: 5px solid red !important;
}

image
image1920×1003 164 KB

Best regards,
Kevin Kim

4

Thanks Kevin, I used the css style and it worked for me. I just didn’t think to use a seperate linked in css file.