CODEWITHSUNDEEP
vue.jsvuetify.js
Kogelet
Kogelet

Reputation: 514

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

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

Upvotes: 5

Views: 10207

Answers (6)

Nats
Nats

Reputation: 63

Using Vue 3, I wanted to create a button to be embedded by other projects. What I did was:

<template>
    <v-app class="bg-transparent">
        <MyComponent />
    </v-app>
</template>

<style scoped lang="scss">
.v-application {
    height: fit-content;
    width: fit-content;
}

.v-application :deep(.v-application__wrap) {
    min-height: fit-content !important;
}
</style>

Since :deep() substitutes ::v-deep, I can use it to set the min-height of v-application__wrap.

Also, I used fit-content because I just want to use the button size of the screen.

Let me know if theres a better way to reach it using Vue 3 with Vuetify.

Upvotes: 0

Dhruv Patel
Dhruv Patel

Reputation: 9

In Vue3 class name Changed old class name :v-application--wrap new class name:v-application__wrap

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

I hope this help you !

Upvotes: 1

Seif
Seif

Reputation: 749

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.

Upvotes: 1

Aleksandar Belic
Aleksandar Belic

Reputation: 469

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;".

Upvotes: 1

Kogelet
Kogelet

Reputation: 514

Here is the solution that worked for me.

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

Upvotes: 4

Xaime Pardal
Xaime Pardal

Reputation: 71

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.

Upvotes: 2

Related Questions