How to Delete Web Viewer HTML Inline Style

[rlaks5757]

Product: WebViewer SDK

Product Version: 11.3.0

Please give a brief summary of your issue:
(Think of this as an email subject)
How to delete Web Viewer HTML Inline Style, when closed webviewer.

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

When WebViewer is rendering, the root value is entered as an inline style in the sytle of the html tag, which is currently a problem because it overlaps with our basic style.
Is it possible for me to arbitrarily adjust the values that go into the online style when I end WebViewer or in the html tag’s sytle? Or I don’t want this function to work at all.

Please provide a link to a minimal sample where the issue is reproducible: none

[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.

When using Apryse's WebViewer, inline styles are often applied to elements for rendering purposes. If these styles are conflicting with your existing styles, you may want to remove or adjust them when closing the WebViewer. Unfortunately, there isn't a built-in method to prevent these inline styles from being applied initially, but you can manipulate the DOM after the WebViewer is closed.

Some things you can try:

• Listen for WebViewer events that indicate it is closing or has closed, then remove or adjust the inline styles using JavaScript.


• Use JavaScript to select elements with inline styles and modify them as needed after WebViewer has been initialized or closed.


• Consider overriding styles with more specific CSS rules to ensure your styles are applied.

Here are some resources that might help you:

• Integrate WebViewer JavaScript PDF Viewer & Editor into a Web App - This guide can help you understand how to load WebViewer, which includes managing styles.


• Overview of the DocumentViewer - Learn more about the DocumentViewer object which might help you manipulate and control the WebViewer environment.


• Setting up WebViewer for real-time document collaboration - Provides information on setting up and customizing WebViewer, which can include handling styles.


• Get Started with WebViewer via NPM - Helpful if you're using npm to manage your WebViewer setup and need to adjust configurations.

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

[rlaks5757]

Thank you for your cooperation.

Is there an event listener inside WebViewer that detects termination on its own?

Regards,

[luke.dam]

Hello rlaks5757,

Thank you for contacting WebViewer Forums.

If you can elaborate on your workflow or clarify what “end/close WebViewer” means, I can support you more accurately. Thank you!

If you are referring to WebViewer CSS, you can customize the styles by adding the css property into the WebViewer constructor and referencing the css file:

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

More information can be found in our documentation here: Custom JavaScript PDF Viewer UI Style: Buttons, Panel, Modal | Apryse documentation

Regards,
Luke

[rlaks5757]

Thank you for your cooperation.

This is our default border color.

When open webviewer.

After close webviewer.

As the webviewer loaded as shown in the attached photos, our basic style was broken by applying the inline style to the html tag. What I want to check is if there is a way to remove the applied html inline style when the webviewer closes.

Regards,

[luke.dam]

Hello rlaks5757,

Thank you for your reply.

Currently, the only way to overwrite the default inline style is by creating a custom UI and removing the CSS folders. More information here: Advanced UI Customization | Apryse documentation

In the repository, you can find these inline styles attached to the themes in this directory:
webviewer-ui/src/constants

Regards,
Luke