Vue vuetify v-dialog preventing screen from scrolling

1
votes

A Vuetify question. Something has just started appearing in my app. On several views/components, I have a v-dialog. Up until a short while ago, the dialog would open correctly but as it was often taller than the screen I could comfortably scroll. Now the dialog seems to have taken control in the respect that I cannot scroll at all when a dialog is open.

This won’t scroll, so I can’t move to the bottom of the dialog. As I said, this is a “new” thing:

screenshot of problem

What I did, maybe this helps. I put a vue-youtube inside a new component (which is in a v-dialog), I was not happy with exactly where it was, I wanted it higher on the screen so I did the following:

<style scoped>
.v-dialog {
  position: absolute;
  top: 10%;
}
</style>

However, I initially forgot to use scoped. Not sure if this is the cause but all my dialogs have been affected.

1
vue.jsvuetify.js

1 Answers

3
votes

What you need is a scrollable dialog, Please check the link https://vuetifyjs.com/en/components/dialogs/#scrollable

<v-dialog v-model="dialog" scrollable>
  <v-card class="pa-3">
    <v-card-text>
       <v-form>
          <!-- Add your form here -->
       </v-form>
    </v-card-text>
  </v-card>
</v-dialog>