Is there a way to change the size of the Search panel and the ambientString length of search result?

WebViewer Version: v8.0

Hi, is it a way to customize the size of the Search panel? In my case every time once the panel opened it will occupy at least half of my web viewer div. I am looking for a method that can make it smaller.

I got most of sample code from here : PDFTron Systems Inc. | Documentation

I wish my panel the size is like this demo : PDFTron WebViewer Demo: JavaScript PDF Viewer Demo

And is it a way to set up the ambientString length of search result? so far the ambient strings will show the sentence where the search keyword at. Is it possible to set it to include a sentence before this sentence and a sentence after it as well (like 3 sentences with the keyword sentence at the middle).

I am using Next.js in my project. in the webviewer I am using instance.UI.setHeaderItems() to customize my UI item.

Thank you !

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello,

Would you mind sharing what it is that you see with the search panel size?
Did you have any style changes or recent changes that could have impacted this?

From the current version (8.4.1) and even prior versions, I have never seen the search panel open to half the WebViewer div by default. Unless your div is also really small, it should not take up that much space when it opens unless you have dragged it out.

Regarding the ambient strings, it doesn’t seem like there is an option to control that in the API right now. I can add it to the backlog for investigation later on. An alternative option would be to use textSearchInit to get the text as well as quads of the found results. Then use DocumentViewer.select with a larger quad to attempt to capture text in the general vicinity.

https://www.pdftron.com/api/web/Core.DocumentViewer.html#select__anchor

Please note only one search can be initiated at a time.

Let me know if this helps!

thank you for your help.
I think the search panel issue is caused by my div size. I tried to adjust the div size and it seems like once the div size reduces to a certain number the search panel will cover the whole div. I have increased the div size and the problem is gone.

Thanks for the update!

If the div is too small, WebViewer should adjust and the panels should open up as full width for mobile sizes. I am wondering if perhaps you are missing some HTML tags to make the scaling work properly.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content ="yes">

Could you please confirm whether you had these tags on your page?

Hi, I don’t have those tags. thank you for your help!

Hi, regarding the search panel, the default position of the panel is on the right of the screen and the note panel is on the left. Is it a way to rearrange the position of them ? For example, move the search panel to the left of webviewer and the note panel to the right like swith them?
thank you

Hm, I think you might be using the notesInLeftPanel option in the constructor since the default location of the notes panel is on the right. That or you are using perhaps the legacy UI of WebViewer.

Regardless, I think the only way to move them right now is to customize the open-source UI. This is especially so for the search panel.

thanks for your suggestion.
I was following the instruction from :

to set up my webviewer header and instruction from:

to set up my search panel and I am using
"
instance.UI.addSearchListener(searchListener);

instance.UI.searchTextFull(searchPattern, searchOptions);

". the search panel seems like the default is on the right of webviewer.
so based on your suggestions, is that mean I can’t use the webviewer instance to set the search panel position and instead, I should do it another way like this sample?

Sorry to ask for your help again. Please give me a little more guidance.

No worries! You don’t have to go that far and create a completely custom UI. You just need to customize the default WebViewer UI to support what you need.

The component you are looking into should be this one: webviewer-ui/LeftPanel.js at 8.4 · PDFTron/webviewer-ui · GitHub. You will just need to bring in the search panel here.

You could also try to use CSS to move the search panel but it may affect other panels.

thanks for you helping.
I tried to follow the instruction :

I git clone to one of my exist project sub directory, run npm install , and when I tried to run npm run build it just failed.

I tried to git clone to a completely new directory, not within any project and the npm run build is successed. but when I copy all the files in the webviewer-ui/build folder to the lib/ui folder in my app and runs my app. my UI shows nothing just blank.
Do I need to install some packages or some versions difference lead to this issue or I used a wrong way to do it?
thank you

I suspect you are running into a version issue although it should still show something. It is hard to say without the actual error message from the browser console. Please make sure you are building the corresponding UI version to your WebViewer version to reduce any possible issues. You noted earlier you were on WebViewer 8.0 but from the screenshot, I see you are building 8.4.1 of the UI. You may have to change your branch.

Regarding any installation issues, i would recommend the solutions proposed recently:

If you are using NPM version 7 or higher, you may get an error indicating an issue with the dependency tree. There are two possible solutions for this:

  • Downgrade your version of Node to v14, which uses NPM version 6.
  • When running npm install add the flag --legacy-peer-deps.

I tend to have better success with the first option running in WSL as well.

Let me know if this helps!

thank you so much. I downgrade the Node version and the npm run build worked.

I was trying to build webviwer customize UI (based on a new project requirement) following the react example:

I am using Next.js and there is an error when I run my project

I have add

to my public/webviewer/lib/ui/index.html

Is this version conflict again or I missed some packages?
thank you. If is allow, i can post my code about how I load the webviwer here to show you more info.

I don’t think this error is related to a version conflict or missing packages. I think you can check out the Next.js integration guide and sample code for comparison: PDFTron Systems Inc. | Documentation.

Hi, I downloaded the Next.js sample code from

when I change the index.js to

import { useEffect, useRef, useState } from "react";

export default function HomePage() {
  const viewer = useRef(null);
  const scrollView = useRef(null);
  const [documentViewer, setDocumentViewer] = useState(null);
  const [annotationManager, setAnnotationManager] = useState(null);

  useEffect(() => {
    const Core = window.Core;
    Core.setWorkerPath("/webviewer/lib");
    Core.enableFullPDF();

    const documentViewer = new Core.DocumentViewer();
    documentViewer.setScrollViewElement(scrollView.current);
    documentViewer.setViewerElement(viewer.current);
    documentViewer.loadDocument("/files/pdftron_about.pdf");

    setDocumentViewer(documentViewer);

    documentViewer.addEventListener("documentLoaded", () => {
      console.log("document loaded");
      documentViewer.setToolMode(
        documentViewer.getTool(Core.Tools.ToolNames.EDIT)
      );
      setAnnotationManager(documentViewer.getAnnotationManager());
    });
  }, []);

  return (
    <div className="MyComponent">
      <div className="webviewer" ref={viewer} style={{ height: "100vh" }}></div>
    </div>
  );
}

This is similar to app.js from React sample GitHub - PDFTron/webviewer-custom-ui: Demonstrates how to get started with making your own UI
but it shows error:


Could you please give me an idea what cause this error? thank you very much!

To use the Core namespace without loading the default viewer, you should have referenced the webviewer-core.min.js script on the HTML page: PDFTron Systems Inc. | Documentation.

Yes, I have included the Script in the index.js ,but no matter how I change the path to webviewer, it keep showing loading fail for script.
here is my index.js after I added the script:

import { useEffect, useRef, useState } from "react";

export default function HomePage() {
  const viewer = useRef(null);
  const scrollView = useRef(null);
  const [documentViewer, setDocumentViewer] = useState(null);
  const [annotationManager, setAnnotationManager] = useState(null);

  useEffect(() => {
    const Core = window.Core;
    Core.setWorkerPath("/webviewer/lib");
    Core.enableFullPDF();

    const documentViewer = new Core.DocumentViewer();
    documentViewer.setScrollViewElement(scrollView.current);
    documentViewer.setViewerElement(viewer.current);
    documentViewer.loadDocument("/files/pdftron_about.pdf");

    setDocumentViewer(documentViewer);

    documentViewer.addEventListener("documentLoaded", () => {
      console.log("document loaded");
      documentViewer.setToolMode(
        documentViewer.getTool(Core.Tools.ToolNames.EDIT)
      );
      setAnnotationManager(documentViewer.getAnnotationManager());
    });
  }, []);

  return (
    <>
      <script src="../public/webviewer/webviewer-core.min.js"></script>
      <div className="MyComponent">
        <div
          className="webviewer"
          ref={viewer}
          style={{ height: "100vh" }}
        ></div>
      </div>
    </>
  );
}


image
here is where the webviewer folder locate.

thank you

It looks like you have the path wrong in the HTML. The core script should be under public/webviewer/lib/core, not public/webviewer.

Also, when you reference the worker path, make sure you have it referencing the right location as well. You should be able to check the network panel to see whether the worker WASM files are being fetched.

Thank you. I changed my path on HTML accordingly to :

and also I change my work path to
image

In the console the" loading fail for script error" is gone. However there is another one pop up:

in the console:

It seems like the Core is still undefined. Is any more scripts need to be loaded?

Thank you very much