Vuetify Dialog with Card and fixed Toolbar

Question

As the title states, I have a component that opens a dialog. The dialog contains a card with a toolbar at the top and a form within the card. I am trying to make the toolbar fixed such that it does not disappear when scrolling. I have tried to add the "fixed" attribute to my toolbar but doesnt seem to give me the results I expect. Below is my code and thanks in advance...

<template>
  <v-dialog :value="createToggle" @input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
    <v-card>
      <v-toolbar fixed flat>
        <v-toolbar-title>Title</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon>
            <v-icon class="heading grey--text text--darken-4">close</v-icon>
          </v-btn>
      </v-toolbar>
      <v-divider></v-divider>
      <v-card-text>
        <v-form ref="form">
          <v-container>
            <v-layout row wrap>
              <v-subheader class="">
                Section
              </v-subheader>
                <v-flex xs12 v-for="n in 20">
                    <v-text-field
                      label="Field Name"
                      outline
                    >
                  </v-text-field>
                </v-flex>                                                                                     
              </v-layout>
            </v-container>
          </v-form>
      </v-card-text>
      <v-card-actions> 
        <v-btn>Cancel</v-btn> 
        <v-btn>Save</v-btn>           
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

Solution 1

For me this is work (Vuetify version 2)

1. Add scrollable prop in <v-dialog>
2. inside <v-card> use <v-card-title> instead of <v-toolbar>
3. then your <v-toolbar> put inside <v-card> and remove fixed prop in <v-toolbar>
4. Last, add class="pa-0" in <v-card-title> for removing the padding in v-card-title element

---

<template>

  <!-- Add Scrollable Prop -->
  <v-dialog scrollable :value="createToggle" @input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">

    <v-card>
      
      <v-card-title class="pa-0">
        <v-toolbar flat>
          <v-toolbar-title>Title</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon>
            <v-icon class="heading grey--text text--darken-4">close</v-icon>
          </v-btn>
        </v-toolbar>
      </v-card-title>

      ...

      <v-card-actions> 
        <v-btn>Cancel</v-btn> 
        <v-btn>Save</v-btn>           
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

Solution 2

For browsers that support position: sticky (https://caniuse.com/css-sticky), you can use pure CSS to set the toolbar to be sticky positioned at the top:

.v-dialog > .v-card > .v-toolbar {
  position: sticky;
  top: 0;
  z-index: 999;
}

You could write this selector differently if you didn't want this applying to all situations where this occurs in your application - add a specific class to your toolbar, for example.