Vue filepond - Change dimensions

Question

I'm using a Vue Filepond and would like to make it fill the height of its container. I'm also using Vuetify.

If I try setting the values in the CSS it gets overridden by 76px.

fill-height is making the file-pond outer container fill the area but not its content.

<template>
  <file-pond
    class="fill-height"
    name="filePond"
    height='100%'
    ref="filePond"
    label-idle="Drop files here or <span class='filepond--label-action'>Browse</span>"
    accepted-file-types=".csv"
    v-bind:files="files"
    @processfile="updateUploadedFiles"
    @error="errorLoadingFile"
    :server="serverOptions"
    :allow-multiple="true"
    :allow-process="false"
    :allow-revert="false"
    :drop-on-page="true"
    :drop-on-element="false"
    :maxParallelUploads="3">
  </file-pond>
</template>

I've tried setting the styling to this but it's not making a difference.

.filepond--root,
.filepond--root .filepond--drop-label {
  height: 200px;
}

Answer 1

My workaround:

• Encircle that on a vuetify v-card
• Use the background color that filepond is using
• Set min and max height of the working filepond area (file--root) (do not scope the CSS file)

     <template>
      <v-card flat class="pa-0" style="background-color: #f1f0ef;height: 421px;">
        <file-pond
        ref="pond"
        name="filePondImages"
        @init="handleFilePondInit"
        :files="imagenesAnuncioFilePond"
        @processfile="imagenesAnuncioOnProcess"
        @removefile="imagenesAnuncioOnDelete"
        />
      </v-card>
    </template>
    
    <style lang="scss">
    .filepond--root {
      display: flex;
      flex: column;
      min-height: 421px;
      max-height: 421px;
    }...