Distance Measurement popup alignment

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.

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

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;
}

Best regards,
Kevin Kim

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.