filepond--list-scroller overlays other elements [Bug]

[nightspite]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated FilePond and its plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

The bug that I have found is causing all elements below the dropzone to not be clickable. It's caused by one of 2 things: either z-indexes or the way of positioning the elements needs to be changed.

.filepond--list-scroller has a height of 100% (so it inherits from the parent -> 76px) & it's translated by 76px, so it looks like on the screenshot below. Because of that the z-indexes on child elements are not playing along with the other elements on the page.

A simple solution, that I'm currently using is changing position: absolute & transform: translate3d() to just flex layout.

.filepond--root {
  display: flex !important;
  flex-direction: column !important;
}

.filepond--drop-label {
  transform: translate3d(0, 0, 0) !important;
  position: relative !important;
}

.filepond--list-scroller {
  transform: translate3d(0, 0, 0) !important;
  position: relative !important;
  height: auto !important;
  flex: 1 !important;
}

Reproduction

I am using the React library, but the problem refers to styling, so I though creating the issue in the main repo is the way. But the setup using React looks like that:

'use client';

import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
import 'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css';
import './upload-dropzone.css';
import { FilePond, registerPlugin } from 'react-filepond';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
import { useRef } from 'react';
import { useCreateUpload } from '@/api/upload';

// filepond plugins
registerPlugin(
  FilePondPluginFileValidateType,
  FilePondPluginImageExifOrientation,
  FilePondPluginImagePreview,
  FilePondPluginFilePoster,
);

interface UploadDropzoneProps {
  teamId?: string;
}

export const UploadDropzone = ({ teamId }: UploadDropzoneProps) => {
  const { mutateAsync: createUpload } = useCreateUpload();
  const ref = useRef<FilePond>(null);

  return (
    <FilePond
      acceptedFileTypes={[
        'image/png',
        'image/jpeg',
        'image/gif',
        'video/mp4',
        'video/mov',
      ]}
      allowFilePoster
      // allowImageCrop
      // allowImageResize
      // allowImageTransform
      allowMultiple
      credits={false}
      disabled={!teamId}
      labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
      maxFiles={10}
      name="files"
      // onprocessfile={(error, file) => {
      //   if (!error && file && ref.current) {
      //     ref.current?.removeFile(file);
      //   }
      // }}
      ref={ref}
      server={{
        process: async (
          _fieldName,
          file,
          _metadata,
          load,
          error,
          _progress,
          _abort,
        ) => {
          try {
            if (!teamId) {
              throw new Error('No team selected');
            }
            const formData = new FormData();

            formData.append('teamId', teamId);
            formData.append('file', file);

            await createUpload({
              body: formData,
            });
            load('done');
          } catch (e) {
            error('Error uploading file');
          }
        },
      }}
      stylePanelLayout="compact"
    />
  );
};

Environment

- Device: Macbook Pro M1 Max
- OS: MacOS Ventura 13.4.1 (22F82)
- Browser: Arc Version 1.25.1 (45028)

Npm packages
- "react": "18.2.0",
- "react-dom": "18.2.0",
- "react-filepond": "^7.1.2",
- "filepond-plugin-file-poster": "^2.5.1",
- "filepond-plugin-file-validate-type": "^1.2.8",
- "filepond-plugin-image-crop": "^2.0.6",
- "filepond-plugin-image-edit": "^1.6.3",
- "filepond-plugin-image-exif-orientation": "^1.0.11",
- "filepond-plugin-image-preview": "^4.6.12",
- "filepond-plugin-image-resize": "^2.0.10",
- "filepond-plugin-image-transform": "^3.8.7",

[KrunchMuffin]

@nightspite This is great. Thanks! Flex is the way to go.

[bbredewold]

Yeah it seems to apply this styling in certain layout render modes:

https://github.com/pqina/filepond/blob/3e67132af3eb0c709b439b7a85b68c37ac302e09/src/css/modifiers.css#L33-L40

Disabling the height and overflow property fixes it. But why were these props there in the first place? But looking the age of this issue...

[rikschennink]

I'm not sure why it's positioned outside/below the box in this situation. Will look into it when I have some time. Currently working on v5 which won't have this issue.

[bbredewold]

I'm not sure why it's positioned outside/below the box in this situation. Will look into it when I have some time. Currently working on v5 which won't have this issue.

I get that, no problem ;) Maybe I can fix things, but where can I find examples of the Filepond instances in compact and integrated modes?

[rikschennink]

@bbredewold Appreciate the offer. Have to admit that these aren't well documented.

It's controlled with the stylePanelLayout referenced in the property table on this page, I've copied it below:

Set a different layout render mode. Can be either 'integrated', 'compact', and/or 'circle'. Compact mode will remove padding, integrated mode is used to render FilePond as part of a bigger element. Circle mode adjusts the item position offsets so buttons and progress indicators don't fall outside of the circular shape.

The circle mode can be seen on the homepage, it's the profile picture example. I don't think I have an example of the integrated mode, but it's apart from some margins I believe it's very similar.