# Distance Measurement popup alignment

**URL:** <https://pdfjs.community/t/distance-measurement-popup-alignment/2960>\
**Category:** Technical Support\
**Created:** [November 17, 2023, 3:49pm UTC](https://pdfjs.community/t/distance-measurement-popup-alignment/2960 "2023-11-17T15:49:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![justin.spencer](https://avatars.discourse-cdn.com/v4/letter/j/67e7ee/32.png) [@justin.spencer](https://pdfjs.community/u/justin.spencer)\
**Post date:** [November 17, 2023, 3:49pm UTC](https://pdfjs.community/t/distance-measurement-popup-alignment/2960/1 "2023-11-17T15:49:18Z")

</div>

**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](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/6/6e5143aaaea647a82337faa2555014fdaff7d228.png)

I can modify the css manually (but my changes will be wiped out on every update).  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/4/4cf21176a2c83338e5e462d1093dab03f9b1148b.png)

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](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/6/6f881e263e6603bfbae9edd9a71ec4d7c0a1c171.png)

Any clues would be very helpful thanks.

Justin

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [November 17, 2023, 9:14pm UTC](https://pdfjs.community/t/distance-measurement-popup-alignment/2960/3 "2023-11-17T21:14:29Z")

</div>

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](https://pdfjs.express/documentation/ui-customization/customizing-styles#accessing-dom-directly):

```javascript
    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](https://pdfjs.express/documentation/ui-customization/themes#setting-webviewer-constructor-css-option)  
and in the CSS file, you can add something like:

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

```

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/f/f8ed73b1938022659baa82615fb9f9164d6bad1d.jpeg)

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![justin.spencer](https://avatars.discourse-cdn.com/v4/letter/j/67e7ee/32.png) [@justin.spencer](https://pdfjs.community/u/justin.spencer)\
**Post date:** [November 20, 2023, 8:36am UTC](https://pdfjs.community/t/distance-measurement-popup-alignment/2960/4 "2023-11-20T08:36:04Z")

</div>

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.