Overlay doesn't open properly...

[thiagomajesk]

If you are using a big form on the page and the file pond is for instance, at the end of the form. After opening the preview, the overlay opens up at the start of the page.

The problem gets worse because the user can now click multiple times in the preview and open many overlays on top of each other (because you can still interact with the page behind).

If I change the overlay position from absolute to fixed it now behaves correctly, although the background is still scrollable:

.filepond--fullsize-overlay {
  position: fixed;
  backdrop-filter: blur(2px);
}

[rikschennink]

Which FilePond plugins are you loading?

[thiagomajesk]

Hi @rikschennink, sorry for not leading up with more information. I thought this was specific to the image preview plugin... This is what I have configured so far:

JS

FilePond.registerPlugin(FilePondPluginImagePreview)
FilePond.registerPlugin(FilePondPluginImageCrop)
FilePond.registerPlugin(FilePondPluginImageTransform)
FilePond.registerPlugin(FilePondPluginImageResize)
FilePond.registerPlugin(FilePondPluginImageOverlay)
FilePond.registerPlugin(FilePondPluginImageExifOrientation)
FilePond.registerPlugin(FilePondPluginFilePoster)
FilePond.registerPlugin(FilePondPluginFileValidateSize)
FilePond.registerPlugin(FilePondPluginFileValidateType)
FilePond.registerPlugin(FilePondPluginFileMetadata)
FilePond.registerPlugin(FilePondPluginImageFilter)
FilePond.registerPlugin(FilePondPluginImageEdit)

CSS

@import 'filepond/dist/filepond.css';
@import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
@import 'filepond-plugin-image-overlay/dist/filepond-plugin-image-overlay.css';
@import 'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css';
@import 'filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css';

PS.: I haven't used filepond before so I'm not sure what to expect. I'm trying to bring your image editor to a new project I'm working on.

[rikschennink]

The overlay plugin isn't part of the FilePond repository, best to submit a ticket here: https://github.com/nielsboogaard/filepond-plugin-image-overlay

[thiagomajesk]

Oh! My apologies @rikschennink... I blindly followed an integration tutorial and completely missed that this wasn't part of the main library. Again, my apologies. I'm gonna close this issue now and see if I can get some help in the correct repository. Cheers!

[rikschennink]

No worries 👍