Add custom button inside Note box

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) {

    const textContainer = noteBox.querySelector('.container') as HTMLElement;

    if (!textContainer) {

    //Don't proceed if button already exists
    if (textContainer.querySelector(`#referenceLink_${note.Id}`)) {

    //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 = 'flex'; = '16px'; = '40px';

    const referenceLinkButton = document.createElement('button'); = `referenceLink_${note.Id}`;
    referenceLinkButton.setAttribute('data-element', 'referenceLinkButton');
    referenceLinkButton.type = 'button'; = '14px';
    referenceLinkButton.innerHTML = `<div class="Icon"><svg xmlns="" 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>`;


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:

Hi there,

Thank you for contacting WebViewer forums,

The ‘…more’ logic is calculated here in our public UI folder in the getTextWidth() method:

You may need to do some additional shifting for the icon to allow more space for the text, or follow the advanced UI customization guide to create your own logic for the ‘…more’ indicator.

Best regards,
Kevin Kim

Hi Kevin.

I followed your clue that the WebViewer looks at the width for determining if going to show the …more or not. I noticed that almost all the time, the computed width results in 186px no matter the size of my viewport. So I thought of adding an explicit style width to the <div> with the .note-text-preview only for Notes where I’ll be changing the .container display style to flex. Something like:

    const notePreview = textContainer.querySelector('.note-text-preview.preview-comment') as HTMLElement; = '186px';

I am pleased to report that I achieved the customization we want:

Thank you very much for the guidance!