I'm trying to get the navigation drawer clipped below the dialog toolbar.
The vuetify manual shows how this works using clipped under a normal toolbar but not with dialog. Recreated issue on: Code pen as well
I tried using fixed property or get it out of the card as well it does not work.
Wondering how else to get it work.
Vuetifyjs: 1.0.5 Vuejs: 2.5.9
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})<link href=".min.css" rel="stylesheet"/>
<script src=".js"></script>
<script src=".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
clipped
right
width=""
height=""
>
<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=".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>I'm trying to get the navigation drawer clipped below the dialog toolbar.
The vuetify manual shows how this works using clipped under a normal toolbar but not with dialog. Recreated issue on: Code pen as well
I tried using fixed property or get it out of the card as well it does not work.
Wondering how else to get it work.
Vuetifyjs: 1.0.5 Vuejs: 2.5.9
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})<link href="https://unpkg./vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg./vue/dist/vue.js"></script>
<script src="https://unpkg./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
clipped
right
width=""
height=""
>
<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./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>1 Answer
Reset to default 2Clipped 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.
Codepen
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})<link href="https://unpkg./vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg./vue/dist/vue.js"></script>
<script src="https://unpkg./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./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>