WebViewer Version: 10.3.0
I already disabled ‘settingsButton’
...
disabledElements: ["settingsButton"],
...
but the divider is still there.
How to remove this divider inside the menu overlay?
Btw, for the version 8.12.0, my workaround was
const iframeDoc = instance.UI.iframeWindow.document;
const lastDivider = <HTMLElement> iframeDoc.querySelector(".Overlay.FlyoutMenu > .divider:last-child");
if(lastDivider) lastDivider.style.display = "none";
However, in the v10, it seems the behavior of the menu button is changed: when the menu button is clicked, it creates the menu overlay element. Upon losing focus on the element, it removes the element completely. Thus, my code cannot easily detect the menu overlay element. I also don’t want to use setInterval to check for the element existence. If you have any suggestion, I’d be very appreciated 
1 Like
Hello,
Thank you for reaching out to us about WebViewer. It looks like we should either hide the divider when the “settingsButton” is hidden or provide a “dataElement” value for hiding the divider. I’ll add this to our backlog.
In the meantime, the easiest way to hide the divider is using CSS. You can see the following guide for how to point WebViewer to a CSS file to use
Link to adding CSS to WebViewer
You would want to add something like the following to hide the element
div[data-element="menuOverlay"] {
.divider {
display: none;
}
}
For your workaround in version 8.12, in version 10.3, we started lazy loading many UI components to improve performance. So the menu overlay isn’t in the DOM when you run the code to hide the divider. You can do something like the following instead to hide it
instance.UI.addEventListener('visibilityChanged', (e) => {
if (e.detail.element === 'menuOverlay' && e.detail.isVisible) {
// enter your code to hide the divider here
}
});
Please let me know if the above was helpful or if you want me to clarfiy something
Best Regards,
Andrew Yip
Web Developer
Apryse
1 Like
Doesn’t seems to work for me.
The event ‘visibilityChanged’ is fired before the DOM is fully loaded. Thus, the querySelector returns null.
It works if I just delay the code execution for a bit with setTimeout() like this:
instance.UI.addEventListener('visibilityChanged', (e) => {
if (e.detail.element === 'menuOverlay' && e.detail.isVisible) {
setTimeout(() => {
const iframeDoc = instance.UI.iframeWindow.document;
const lastDivider = <HTMLElement> iframeDoc.querySelector("div[data-element='menuOverlay'] .divider");
if(lastDivider) lastDivider.style.display = "none";
}, 100);
}
});
I don’t like this solution because of the setTimeout().
My working solution is to use a mutation observer:
const iframe = document.querySelector('iframe').contentDocument;
// Define a callback function to execute when mutations are observed
const callback: MutationCallback = function(mutationsList: MutationRecord[]) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
let lastDivider = iframe?.querySelector<HTMLElement>('div[data-element="menuOverlay"] .divider');
if (lastDivider) {
lastDivider.style.display = 'none';
}
}
}
};
const lastDividerObserver = new MutationObserver(callback);
// Start observing the iframe
if (iframe) {
lastDividerObserver?.observe(iframe.body, { childList: true, subtree: true });
}
1 Like
Hello,
I’m glad you were able to find a solution. You are correct that “visibilityChanged” trigger a bit early and you’ll need to use setTimeout before updating the DOM. There have been some discussion to change this but we have no timeline on when that’ll happen.
The mutation observer is one way you can get around this, the other would be using the CSS as seen in my previous post. Feel free to let us know if you have any other questions
Best Regards,
Andrew Yip
Web Developer
Apryse
1 Like