Vuetify: changing min-height of v-application--wrap

user_6877357 0
Viewed 3817

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>

Vuetify widget empty space in height

vuetify.js vue.js
4 Answers

Here is the solution that worked for me.

<style scoped lang="scss">
 ::v-deep .v-application--wrap {
    min-height: fit-content;
  }
</style>
user_68773570

Try unsetting it via CSS in your App.vue file:

<style>
.v-application--wrap {
  min-height: unset;
}
</style>

It should unset the default rule "min-height: 100vh;".

user_23623050

I have had the same problem and I have solved it as follows:

<style>
  .v-application--wrap {
    min-height: 0vh !important;
  }
</style>

In App.vue

Also, I have built it as a library using vue-cli

I'm new to Vue and Vuetify.

user_159286810

For me, I removed <v-app> from the component and added it to the enclosing page (I'm using Nuxt) which removed the extra space from the component.

user_79796610
Related