PDF toolbar with icons disappear during scrolling

[wider2]

Angular 17
ngx-extended-pdf-viewer: 22

I open the PDF file in the popup window
When I select the tool draw or input text and make some input or draw some layer over PDF content - it works perfectly
But if I try to scroll down some pages, the toolbar on the top with icons disappears.
The toolbar should be always on the top of whatever user scrolled down

[stephanrauh]

That doesn't happen here: https://pdfviewer.net/extended-pdf-viewer/modal
I suspect it has something to do with your application, and your CSS in particular. Can you prepare a reproducer? I.e. a minimal but complete example showing the problem and that runs without forcing me to install additional stuff?

[wider2]

if i try to add an attached pictures, top toolbar of tools missed. (see screenshot) Toolbar should be set on the top as a rock.

[stephanrauh]

There's an error message in the console window. What's happening there? Set [minifiedJSLibraries]="false" for simplified debugging, please.

[wider2]

Uncaught TypeError: Cannot read properties of undefined (reading 'type')

if (evt.dataTransfer.files?.[0].type

detailed:

    appConfig.mainContainer.addEventListener("drop", function (evt) {
      if (AppOptions.get("enableDragAndDrop")) {
        if (evt.dataTransfer.files?.[0].type !== "application/pdf") {
          return;
        }
        evt.preventDefault();
        evt.stopPropagation();
        eventBus.dispatch("fileinputchange", {
          source: this,
          fileInput: evt.dataTransfer,
          dropEvent: evt
        });
      }
    });

but this error appears only when trying to select the text, draw hightlight line

My question mostly about missed toolbar when trying to add a new image

try locally to add an image over the pdf layers - and you will see how top tollbar tools missed, disappears

[stephanrauh]

It seems you've accidentally reported a bug you didn't want to report. :)

I think you bug is a CSS issue. I suspect you're scrolling the entire PDF viewer instead of scrolling the payload div inside the viewer. Without seeing your source code, it's hard to tell more, but I think that's where you should look. Try to find out which div is scrollable.

[wider2]

I have not mentioned scrollbars in the algorithm
During the test, i discovered the following:

1. small images (< 300px) attached to the PDF layer very well
2. but big image attachments create a problem - damaged toolbar at once and he disappear

[wider2]

it seems to be i have found the solution:
just need to add a property to the library

[height]="'100vh'"

.pdf-viewer-container {
  height: 100vh;
  overflow: auto;
}

[stephanrauh]

Let's close the ticket. I'm pretty sure there's something strange going on in your application, but without seeing it, I can't even guess what it might be. I'm happy you've found a work-around!