I am currently working with a Vue Filepond and trying to ensure that it fills the height of its container. My Vue Filepond setup also involves Vuetify.
Whenever I attempt to set values in the CSS, they are constantly overridden by 76px.
Although fill-height successfully expands the file-pond's outer container to occupy the designated area, its content remains unaffected.
<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 have attempted adjusting the styling as shown above, but unfortunately, it has not yielded any noticeable results.
.filepond--root,
.filepond--root .filepond--drop-label {
height: 200px;
}