When you click the button labeled "KOMMENTAR HINZUFÜGEN," a text input field is displayed. However, I am facing an issue with the layout – there is unwanted white padding below the black line, and I want the text field to occupy the entire panel. I have tried setting margins and paddings to 0 in the CSS, but it hasn't resolved the problem. Below is the code snippet:
<template>
<v-expansion-panels>
<v-expansion-panel class="expansion-panel">
<v-btn @click.prevent="showTextField = !showTextField" color="gray">Kommentar hinzufügen (optional)</v-btn>
<v-text-field v-if="showTextField" v-model="comment" label="Kommentar" class="comment-field" ref="inputField" @click="$refs.inputField.focus()" autofocus></v-text-field>
</v-expansion-panel>
</v-expansion-panels>
</template>
<style scoped>
.comment-field {
width: 25em;
height: 20em;
margin: 0;
}
.expansion-panel {
padding: 0;
}
</style>