WebViewer Version: 10.0.1
Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
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:
Add custom button in Note box
Please describe your issue and provide steps to reproduce it:
Hello. I am doing customization against the note box where I want to add a custom button to the left of the note’s text. See below this mockup:
I am using the UI.NotesPanel.setCustomHeader(notes) function as an entry point and then I’m using javascript to manipulate the html inside per box. Below is my (Typescript) function that is executed per note in the panel:
private addCustomReferenceLinkButton(iframeDoc: Document, note: Core.Annotations.Annotation): void {
const noteBox = iframeDoc.querySelector(`#note_${note.Id}`);
if (!noteBox) {
return;
}
const textContainer = noteBox.querySelector('.container') as HTMLElement;
if (!textContainer) {
return;
}
//Don't proceed if button already exists
if (textContainer.querySelector(`#referenceLink_${note.Id}`)) {
return;
}
//In this area, need to do logic check if this note should be displaying the reference link
//If not, just return
//Modify the style so we can fit the custom button
textContainer.style.display = 'flex';
textContainer.style.paddingLeft = '16px';
textContainer.style.minHeight = '40px';
const referenceLinkButton = document.createElement('button');
referenceLinkButton.id = `referenceLink_${note.Id}`;
referenceLinkButton.classList.add('Button');
referenceLinkButton.setAttribute('data-element', 'referenceLinkButton');
referenceLinkButton.type = 'button';
referenceLinkButton.style.marginRight = '14px';
referenceLinkButton.innerHTML = `<div class="Icon"><svg xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22"><path d="M660-160h40v-160h-40v160Zm20-200q8 0 14-6t6-14q0-8-6-14t-14-6q-8 0-14 6t-6 14q0 8 6 14t14 6ZM200-800v640-640 200-200Zm80 400h147q11-23 25.5-43t32.5-37H280v80Zm0 160h123q-3-20-3-40t3-40H280v80ZM200-80q-33 0-56.5-23.5T120-160v-640q0-33 23.5-56.5T200-880h320l240 240v92q-19-6-39-9t-41-3v-40H480v-200H200v640h227q11 23 25.5 43T485-80H200Zm480-400q83 0 141.5 58.5T880-280q0 83-58.5 141.5T680-80q-83 0-141.5-58.5T480-280q0-83 58.5-141.5T680-480Z"/></svg></div>`;
textContainer.prepend(referenceLinkButton);
}
Unfortunately, I did not expect the WebViewer would render the text area with a …more button no matter how short the comment text is:
The display: flex on the .container element is important because if I leave it to the default (block), it would render like this:
Is there some javascript / inline styling I can do so that the …more will only render if the text is legitimately long?
Please provide a link to a minimal sample where the issue is reproducible:
N/A
