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>

• javascript
• html
• vue.js
• vue-ponent
• vuetify.js

Share Improve this question Follow edited Jul 29, 2020 at 18:58 nara_l asked Apr 24, 2018 at 21:16 nara_lnara_l 67422 gold badges1010 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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.

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>