Within my Vue.js project, I am utilizing the v-bottom-sheet component from Vuetify framework (version 2.1.12). Upon reviewing my code, you can observe that the v-card is enclosed within the v-bottom-sheet. The issue arises with the scrollable parameter of the v-bottom-sheet as outlined in the documentation. Despite following the guidelines, the scrollable feature fails to function. Could you please assist me in identifying the mistake?
In an attempt to address this concern, I resorted to implementing a scrollable effect on the v-card-text using CSS. I defined the information-window-v-card-text CSS class for this specific purpose. While it does provide a scrollable result, the height of the element extends beyond the lower screen border, evident in the image below:
https://i.sstatic.net/IMUEL.png
InformationWindow.vue:
<template>
<v-bottom-sheet
v-model="sheet"
inset
max-width="50%"
hide-overlay
no-click-animation
scrollable
persistent
dark>
<v-sheet
class="information-window-v-sheet">
<v-card
v-if="sheet"
class="information-window-v-card">
<v-card-title>New York</v-card-title>
<v-card-subtitle>11201</v-card-subtitle>
<v-divider></v-divider>
<v-card-text>
// Content omitted for brevity
</v-card-text>
</v-card>
</v-sheet>
</v-bottom-sheet>
</template>
<script>
export default {
name: 'InformationWindow',
data: () => ({
sheet: true
})
}
</script>
<style scoped>
.information-window-v-sheet{
height: 50vh !important;
border-bottom-left-radius: unset !important;
border-bottom-right-radius: unset !important;
background-color: rgba(0,0,0,0.5) !important;
}
.information-window-v-card{
height: 100% !important;
background-color: unset !important;
}
.information-window-v-card-text{
height: 100%;
overflow-y: scroll;
}
</style>