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;
}
My workaround:
<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;
}...