Item styling not working, items extending past the bottom frame, items obscure, idle text.

[majortom64]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

I have tried various of the item classes to try to get rounded corners and to change the background color and none seem to work. Also, as can be seen from the image, the item extends pas the frame and obscures the idle text.

Shot with no items:

Shot with one:

Reproduction

Here is a minimum version that re-creates the problem:

<template>
  <div>
    <div class="shadow sm:rounded-md sm:overflow-hidden">
      <form action="#" method="POST">
        <div class="shadow sm:rounded-md sm:overflow-hidden">
          <div class="bg-white py-6 px-4 space-y-6 sm:p-6">
            <div class="grid grid-cols-6 gap-6">
              <div class="col-span-6">
                <!-- <div class="col-span-3"> -->
                <!-- <div
                  id="ctFilePond1a"
                  ref="ctFilePond1a"
                  class="filepond--root bg-red-300 border-gray-300 border-dashed rounded-md justify-center "
                  @dragover.prevent
                  @drop.prevent
                > -->
                <div class="space-y-1 text-center">
                  <FilePond
                    id="ctFilePond1a"
                    ref="ctPond"
                    name="ctUploads"
                    accepted-file-types="*"
                    label-idle='<div class="bg-blue-400 center mt-14 " ><svg
                        class="mx-auto h-12 w-12 text-gray-400"
                        stroke="currentColor"
                        fill="none"
                        viewBox="0 0 48 48"
                        aria-hidden="true"
                      >
                        <path
                          d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                          stroke-width="2"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                      </svg>
                      <span>Upload a file </span>
                      <p class="text-xs text-gray-500 pt-3">
                        PNG, JPG, GIF up to 15MB
                      </p></div>'
                    allow-multiple="true"
                    instant-upload="false"
                    :files="ctFiles"
                    @init="handleFilePondInit"
                  />
                </div>
                <!-- </div> -->
              </div>
            </div>
          </div>
          <div class="mt-7 px-4 py-3 bg-gray-50 text-right sm:px-6">
            <button
              type="submit"
              class="bg-indigo-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              Save
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { computed, ref } from 'vue'

import vueFilePond from 'vue-filepond' 
import 'filepond/dist/filepond.min.css'

import FilePondPluginImagePreview from 'filepond-plugin-image-preview' 
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
//const myFilePond = filePond(FilePondPluginImagePreview)
const FilePond = vueFilePond(FilePondPluginImagePreview)

export default {
  name: 'DocMin',
  components: {
    FilePond
  },
  setup() {
    const store = useStore()
    const email = computed(() => store.getters['user/email'])

    return {
      //   navigation,
      email
    }
  },

  data: () => ({
    isSending: false
  }),
  methods: {
    startUpload: function() {
      console.log('upload begins')
    },
    handleFilePondInit: function() {
      console.log('FilePond has initialized')
      this.$refs.ctPond.setOptions({
        server: {
          url: 'http://192.168.0.100',
          timeout: 7000,
          process: null,
          load: './load/',
          fetch: './fetch/'
        }
      })
    }
  }
}
</script>

<style scoped lang="postcss">
:deep(.filepond--panel-root) {
  @apply m-1 pt-14 pb-8 bg-white rounded-md justify-center;
}
:deep(.filepond--root) {
  @apply p-24 border-2 bg-red-400 border-gray-300 border-dashed rounded-md justify-center;
}
/* the background color of the file and file panel (used when dropping an image) */
.filepond--item-panel {
  @apply bg-green-500 rounded-md;
}
</style>

Environment

- Device: 2018 Mac Mini
- OS: macOS 12.1
- Browser: Safari: 15.2, Firefox 95.0.2
- Vue version: 3.2.6

[rikschennink]

I'm not sure what styles you're applying but it doesn't look like normal CSS, it's not advertised to work this way, so please post questions like this on Stack Overflow.

[scil]

in my situation, when allow-multiple="true", the preview part appears beneath the gray drop label zone.