I am using a vuetify component as a widget on a page along with another content after the widget. However, I have too much free space between the widget and the rest of the page. The vuetify app takes too much height and I can't figure out how to remove it.
Here's how it look in the browser.
I have tried to override the css of App.vue in the following way but it doesn't work. Any suggestions?
<style scoped>
[data-vuetify] {
overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
min-height: 0vh !important;
}
</style>
Here's how App.vue looks like:
<template>
<div data-vuetify>
<v-app id="app">
<router-view></router-view>
</v-app>
</div>
</template>
<style scoped>
section {
margin: 10px 0;
}
[data-vuetify] {
overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
min-height: 0vh !important;
}
</style>
Here is the solution that worked for me.
<style scoped lang="scss">
::v-deep .v-application--wrap {
min-height: fit-content;
}
</style>