Issue
I have a text input field that gets shown at the click of a button. When "KOMMENTAR HINZUFÜGEN" is clicked, it looks like this:
I am trying to get rid of the white padding below the black line; the text field should fill up the whole panel. I am trying to achieve this by setting the margins and paddings to 0 on the CSS, but no luck. Here is the code:
<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>
Solution
v-text-field
is for single line.
You can use v-textarea
with hide-details: auto
to achieve your goal:
<script setup lang="ts">
import { ref } from 'vue'
const showTextField = ref(false)
const comment = ref('')
</script>
<template>
<v-expansion-panels>
<v-expansion-panel>
<v-btn @click.prevent="showTextField = !showTextField" color="grey">
Kommentar hinzufügen (optional)
</v-btn>
<v-textarea
v-if="showTextField"
v-model="comment"
label="Kommentar"
hide-details="auto"
autofocus
></v-textarea>
</v-expansion-panel>
</v-expansion-panels>
</template>
Answered By - Yue JIN
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.