Custom styles covered up by #highlight-<NAME> style

[prosanelli]

Hello,

I am using webviewer 11.9.0 and I see that you style widget annotations with the getCustomStyles and getContainerCustomStyles [Styling PDF Form Fields with JavaScript | Apryse documentation]. I am getting these values but there’s a third html element #highlight-<NAME> that is covering these styles.

How can i set the style of the #highlight-<NAME> ?

  // my code
  Annotations.WidgetAnnotation.getContainerCustomStyles = () => {
    return {
      "background-color": "rgba(255, 255, 255)", // white
    };
  };

  Annotations.WidgetAnnotation.getCustomStyles = () => {
    return {
      "background-color": "rgba(255, 255, 255)", // white
    };
  };

HTML of an text widget annotation on a PDF:

<div class="text" id="Issuing Authority 1" style="left: 83.2387px; top: 295.785px; width: 89.5387px; height: 11.1825px; position: absolute; padding: 0px; margin: 0px; background-color: rgb(255, 255, 255); z-index: 35; transform: translate(0px, 0px) rotate(0deg); transform-origin: left top; appearance: none; border-style: solid; border-color: rgba(0, 0, 0, 0); border-width: 0px; border-radius: 0px; font-family: Helvetica, sans-serif; font-weight: bold; font-style: normal; font-size: 6.5625px; color: rgb(0, 0, 0); outline: none;">
  <textarea readonly="" tabindex="-1" title="Section 2.  List A.  Issuing Authority 1." style="position: absolute; font-size: inherit; font-family: inherit; font-weight: inherit; font-style: inherit; color: inherit; width: 100%; height: 100%; border: 0px; padding: 1.96875px 0.65625px 0px; margin: 0px; background-color: rgb(255, 255, 255); vertical-align: top; text-align: left; justify-content: flex-start; border-radius: 0px; overflow-wrap: break-word; resize: none; overflow: hidden;"></textarea>
  <div id="highlight-Issuing Authority 1" style="width: 100%; height: 100%; background-color: rgba(49, 131, 200, 0.2); z-index: 1; position: relative; pointer-events: none;"></div>
</div>

backgroundColor: "rgba(49, 131, 200, 0.20)" is found in webviewer-core.min.js

The image show the field is blue and not white:

[system]

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

It seems like the issue you’re facing is due to the #highlight-<NAME> element, which is an overlay used by WebViewer to highlight form fields. This element is covering your custom styles because of its z-index and background settings.

Some things you can try:

• Override the default styles of the #highlight-<NAME> element by using CSS to set its background-color to transparent or to match your desired style.


• Adjust the z-index of your custom styles to ensure they appear above the highlight layer.


• Use JavaScript to directly manipulate the style of the #highlight-<NAME> element after it is created.

Here are some resources that might help you:

• Styling PDF Form Fields - This guide provides information on how to style form fields, including using getCustomStyles and getContainerCustomStyles functions.


• Rectangle Annotations - Learn how annotations are handled in WebViewer, which might give insights into managing styles for overlays.


• Download WebViewer’s JavaScript Library - Access the library to see if there are updates or changes that might affect styling.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

[darian.chen]

Hello Peter,

Thank you for contacting Apryse Forums.

You can remove these highlights with the following line of code.

instance.Core.annotationManager.getFieldManager().disableWidgetHighlighting();

Best Regards,
Darian