Estoy usando un Vue Filepond y me gustaría que llene la altura de su contenedor. También estoy usando Vuetify.
Si trato de establecer los valores en el CSS, se anula con 76px .
fill-height está haciendo que el contenedor externo file-pond llene el área pero no su contenido.
<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>Intenté configurar el estilo para esto, pero no está haciendo una diferencia.
.filepond--root, .filepond--root .filepond--drop-label { height: 200px; }Mi solución:
<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; }...