Vuetify v-spacer has no effect

Question

In my modal <v-dialog>, I try stick one block to the bottom of the <v-col> block by using <v-spacer>, but it has no effect. What am I doing wrong?
Example: https://codesandbox.io/s/vuetify-template-viov1?file=/src/App.vue
I also tried to solve this by adding "d-flex flex-column" to the parent's col class, but in that case size of each row is anomalous
https://codesandbox.io/s/vuetify-template-6wr6g

Thanks for any hints

Answer 1

not sure why you are using so many rows inside columns inside rows... that's just the height of the row.

look at this example, I set a height and the spacer works: https://codesandbox.io/s/vuetify-template-s3pe2?file=/src/App.vue

Answer 2

This is working: https://codesandbox.io/s/vuetify-template-yns2m?file=/src/App.vue

The problems are:

• Incorrect usage of v-container, v-row and v-col - causing the weird spacing issues.
• There should be a fixed height container for the v-spacer to work as expected.