How to get Navigation drawer clipped under dialog toolbar Vuetifyjs + Vuejs
Clipped failed to work but it can be clipped under the dialog tool bar with some inline style. Applied class ='mt-5' and style='top: 16px' to get the desired result.
new Vue({ el: '#app', data () { return { dialog: null, notifications: false, sound: true, widgets: false } }})<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script><div id="app"> <v-app id="inspire"> <v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn> {{dialog}} <v-dialog v-model="dialog" transition="dialog-bottom-transition" width="80%"> <v-card> <v-toolbar dark class="primary"> <v-btn icon @click.native="dialog = false" dark> <v-icon>close</v-icon> </v-btn> <v-toolbar-title>Settings</v-toolbar-title> <v-spacer></v-spacer> <v-toolbar-items> <v-btn dark flat @click.native="dialog = false">Save</v-btn> </v-toolbar-items> </v-toolbar> <v-navigation-drawer temporary absolute right width="" height="" class='mt-5' style='top: 16px' > <v-list light one-line class="grey pa-1"> <v-list-tile> <v-list-tile-content> <v-list-tile-title class="white--text subheading"> HEADER </v-list-tile-title> </v-list-tile-content> </v-list-tile> </v-list> <v-list class="pt-0" dense> <v-divider></v-divider> <v-list-tile > <v-icon color="grey">remove</v-icon> Lorem ipsum lorem ipsum </v-list-tile> </v-list> </v-navigation-drawer> <v-card-media src="https://vuetifyjs.com/static/doc-images/cards/desert.jpg" height="200px"> </v-card-media> <v-card-title primary-title> <div> <h3 class="headline mb-0">Kangaroo Valley Safari</h3> <div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div> </div> </v-card-title> <v-card-actions> <v-btn flat class="orange--text">Share</v-btn> <v-btn flat class="orange--text">Explore</v-btn> </v-card-actions> </v-card> </v-dialog> </v-app></div>