Open renaldasrep opened 2 years ago
Scrollable dialog is not working as it should
Only the v-card-text part is supposed to be scrollable when using scrollable: true, instead the whole card gets a scrollbar and v-card-title + v-card-actions are not visible at all times like they're supposed to be
v-card-text
scrollable: true
v-card-title
v-card-actions
I think it is because the whole card is wrapped in <div class="v-dialog-wrapper">...<div> similar issue described here, and the answer is that v-dialog scrollable needs a specific structure https://github.com/vuetifyjs/vuetify/issues/3713#issuecomment-377569036
<div class="v-dialog-wrapper">...<div>
I'm using $dialog.showAndWait(Component, { ... }) My component:
$dialog.showAndWait(Component, { ... })
<template> <v-card outlined> <v-card-title> Are you sure? </v-card-title> <v-divider /> <v-card-text> ... content that needs a scrollbar ... </v-card-text> <v-divider /> <v-card-actions> <v-btn text @click="$emit('submit', false)" > Close </v-btn> <v-spacer /> <v-btn color="primary" text @click="$emit('submit', true)" > Confirm </v-btn> </v-card-actions> </v-card> </template> <script> export default { layout: [ 'default', { width: 800, scrollable: true, showClose: false } ] } </script>
Hello, did you find a solution for this problem please ? in my case, even the close button is scrolled with the v-card. thanks in advance
Scrollable dialog is not working as it should
Only the
v-card-text
part is supposed to be scrollable when usingscrollable: true
, instead the whole card gets a scrollbar andv-card-title
+v-card-actions
are not visible at all times like they're supposed to beI think it is because the whole card is wrapped in
<div class="v-dialog-wrapper">...<div>
similar issue described here, and the answer is that v-dialog scrollable needs a specific structurehttps://github.com/vuetifyjs/vuetify/issues/3713#issuecomment-377569036
I'm using
$dialog.showAndWait(Component, { ... })
My component: