Document Comparison Bottom of Change List cut off

WebViewer Version:

Do you have an issue with a specific file(s)?
Can you reproduce using one of our samples or online demos?
Are you using the WebViewer server?
Does the issue only happen on certain browsers?
Is your issue related to a front-end framework?
Is your issue related to annotations?

Please give a brief summary of your issue:
(Think of this as an email subject)

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
The WebViewer Document Comparison Tool has the bottom of the change list being cut off. I have tried every type of positioning to change it.

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

import {
  Button,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalOverlay,
} from '@chakra-ui/react';

import { useTaskDocumentViewerContext } from '@/app/context/TaskDocumentContext';
import DiffViewer from '@/app/components/webviewer/DiffViewer';
import { memo } from 'react';

const DocumentComparisonModal = () => {
  const {
    documentComparison1,
    documentComparison2,
    setIsDocumentComparisonModalOpen,
    isDocumentComparisonModalOpen,
  } = useTaskDocumentViewerContext();

  const handleClose = () => {
    setIsDocumentComparisonModalOpen(false);
  };

  return (
    <Modal
      isCentered
      isOpen={isDocumentComparisonModalOpen}
      onClose={handleClose}
      size="7xl"
    >
      <ModalOverlay />
      <ModalContent>
        <ModalCloseButton />
        <ModalBody>
          <DiffViewer
            documentComparison1={documentComparison1}
            documentComparison2={documentComparison2}
          />
        </ModalBody>
        <ModalFooter>
          <Button onClick={handleClose}>Close</Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default memo(DocumentComparisonModal);

import React, {
  useEffect,
  useRef,
  useState,
  useCallback,
  useMemo,
} from 'react';
import WebViewer, { Core } from '@pdftron/webviewer';
import { rootApiUrl } from '@/config/root_api_url';
import { pdfUrlFromId } from '../file_viewer/FileViewerHelpers';
import useFileBlobDirect from '../../hooks/useFileBlobDirect';
import { DocumentComparison } from '../../context/TaskDocumentContext';

interface DiffViewerProps {
  documentComparison1: DocumentComparison | null;
  documentComparison2: DocumentComparison | null;
}

const DiffViewer = ({
  documentComparison1,
  documentComparison2,
}: DiffViewerProps) => {
  const viewerRef = useRef<HTMLDivElement>(null);
  const [documentViewers, setDocumentViewers] = useState<Core.DocumentViewer[]>(
    [],
  );

  const doc1BlobFromHook = useFileBlobDirect({
    fileUrl: pdfUrlFromId('main_documents', documentComparison1?.id ?? ''),
    rootUrl: rootApiUrl,
  });

  const doc2BlobFromHook = useFileBlobDirect({
    fileUrl: pdfUrlFromId('main_documents', documentComparison2?.id ?? ''),
    rootUrl: rootApiUrl,
  });

  const doc1Blob = useMemo(
    () =>
      documentComparison1?.blob
        ? { blob: documentComparison1.blob }
        : doc1BlobFromHook,
    [documentComparison1?.blob, doc1BlobFromHook],
  );

  const doc2Blob = useMemo(
    () =>
      documentComparison2?.blob
        ? { blob: documentComparison2.blob }
        : doc2BlobFromHook,
    [documentComparison2?.blob, doc2BlobFromHook],
  );

  const initializeDiffViewer = useCallback(() => {
    if (!viewerRef.current) return;

    WebViewer(
      {
        path: '/lib',
        licenseKey: process.env.NEXT_PUBLIC_APRYSE_SDK_KEY,
        fullAPI: true,
      viewerRef.current,
    ).then(async (instance) => {
      const { UI, Core } = instance;
      const { Annotations } = Core;
      const { Color } = Annotations;

      UI.enterMultiViewerMode();

      UI.addEventListener(UI.Events.MULTI_VIEWER_READY, () => {
        const [docViewer1, docViewer2] = Core.getDocumentViewers();
        setDocumentViewers([docViewer1, docViewer2]);

        const startCompare = async () => {
          const doc1 = docViewer1.getDocument();
          const doc2 = docViewer2.getDocument();

          if (doc1 && doc2) {
            UI.enableMultiViewerSync();

            const beforeColor = new Color(21, 205, 131, 0.4);
            const afterColor = new Color(255, 73, 73, 0.4);
            const options = { beforeColor, afterColor };

            await docViewer1.startSemanticDiff(docViewer2, options);
          }
        };

        docViewer1.addEventListener('documentLoaded', startCompare);
        docViewer2.addEventListener('documentLoaded', startCompare);
        UI.enableFeatures([UI.Feature.ComparePages]);

        UI.openElements(['comparePanel']);
      });
    });
  }, []);

  useEffect(() => {
    initializeDiffViewer();
  }, [initializeDiffViewer]);

  useEffect(() => {
    if (
      documentViewers &&
      documentViewers.length === 2 &&
      doc1Blob?.blob &&
      doc2Blob?.blob
    ) {
      documentViewers[0].loadDocument(doc1Blob.blob, {
        filename: documentComparison1?.fileName ?? '',
        extension: 'pdf',
      });
      documentViewers[1].loadDocument(doc2Blob.blob, {
        filename: documentComparison2?.fileName ?? '',
        extension: 'pdf',
      });
    }
  }, [
    documentViewers,
    doc1Blob,
    doc2Blob,
    documentComparison1?.fileName,
    documentComparison2?.fileName,
  ]);

  return <div ref={viewerRef} style={{ height: '90vh', width: '95vw' }} />;
};

export default DiffViewer;

1 Like

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It seems like you’re encountering a UI issue where the bottom of the change list in your document comparison tool is cut off. This could be related to CSS styling or the way the component is being rendered within the modal.

Some things you can try:

  • Ensure that the container holding the DiffViewer component has sufficient height and width to display all contents. You might need to adjust the style properties to include overflow: auto to allow scrolling.

  • Check the CSS styles applied to the modal and the DiffViewer component. Make sure there are no constraints that limit the height or cause clipping of the content.

  • Verify that the UI.openElements(['comparePanel']) call is correctly opening the comparison panel and that it’s not being visually restricted by other UI elements.

  • Consider adding a resize listener to adjust the dimensions dynamically if the content size changes.



Here are some resources that might help you:


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

1 Like

Hello Neel,

Thank you for contacting WebViewer Forums.

To investigate further, can you provide the WebViewer version used as well as an image showcasing the issue?

Regards,
Luke

1 Like

Hey Luke,
here’s the screenshot and we’re using 11.2.0

1 Like

Hello Neel,

Thank you for providing a screenshot.

It seems that the ModalFooter element is blocking the list. By removing the footer with the ‘close’ button, is the list still cut off? The CSS will need to be adjusted for this footer.

Regards,
Luke

1 Like