WebViewer Version: 10.9.0
Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? Yes
Are you using the WebViewer server? No
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No
Please give a brief summary of your issue:
(Think of this as an email subject)
I just want to change the background color of the “documentContainer.”
Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
Ultimately, I just want to specify the background color of the “document container” element. This is the element with a class “DocumentContainer” and data element “documentContainer.”
I understand that after reading your documentation on customizing the WebViewer UI that there are a couple ways to approach this. One is to have a CSS asset served separately and specify the path in the WebViewer constructor.
WebViewer({
licenseKey: 'YOUR_LICENSE_KEY',
path: 'lib',
css: 'path/to/stylesheet.css'
}, document.getElementById('viewer'));
I tried this out and it works, but for the simple goal of just changing the background color, this is more setup than I would like.
The other approach in your guide suggests accessing the DOM directly:
const element = instance.UI.iframeWindow.document;
// ...
But I also noticed the setStyle API in your guide. Is the document container accessible using your “Modular UI?” If so, I’m hoping it’s possible to do some variant of the examples I’m seeing instead. Something like:
instance.UI.getDocumentContainer().setStyle({ backgroundColor: "tomato" });
Is such a “component” for the document container accessible like this, or is accessing the DOM really the only option?
Please provide a link to a minimal sample where the issue is reproducible:
Not applicable.
