Make Vuetify dialog full screen with scrollable list inside and content on top and bottom

Question

I am having issue with Vuetify list inside dialog. My goal is to have available header/footer and inside it have a scrollable list with all this content having max of 600px height but being adjusted on smaller screens.

Right now, I have issue where it is working correctly for bigger screens height > 600px (I can scroll list + I see buttons at the bottom) but work incorrectly on smaller screens (can scroll list but have to scroll at the end to see buttons).

Do anyone have an idea what did I forget to add?

<!-- MovementsInput component -->
<template>
  <v-form
  ref="form"
  v-model="valid"
  lazy-validation>
    <v-card
    >
      <v-card-title class="headline primary">
        Add new movement
      </v-card-title>
      <v-card-text>
        <v-list
          style="max-height: 600px"
          class="scroll-y">
          <template 
            v-for="movement in movements">
            <v-list-tile
            :key="movement.name">
              <v-list-tile-title>
                {{movement.name}}
              </v-list-tile-title>
            </v-list-tile>
          </template>
        </v-list>
        <!-- Ignore this autocomplete, forget to remove it from screenshot -->
        <v-autocomplete
          v-model="movement"
          :items="movements"
          :color=this.$vuetify.theme.secondary
          hide-selected
          item-text="name"
          item-value="name"
          label="Movement"
          placeholder="Select movement from the list"
          return-object
        ></v-autocomplete>
      </v-card-text>
      <v-card-actions>
          <v-btn
          color="grey"
          @click="cancelClicked"
        >
          Cancel
          <v-icon right>fa-undo</v-icon>
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn
          :disabled="!valid"
          :rules="[v => !!v || 'Everything has to be valid']"
          required
          color="primary"
          @click="confirmClicked"
        >
          Confirm
          <v-icon right>fa-check</v-icon>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-form>
</template>

<!-- Other file, all this is for now called in simple Vuetify dialog -->
<v-dialog
 persistent
 :value="true"
>
 <MovementsSelect />
</v-dialog>

Ondřej Ševčík Ondřej Ševčík · Accepted Answer · 2019-07-20T21:12:58

So, I did find solution, here is full example from Vuetify documentation.

<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="600px">
      <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="headline">User Profile</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm6 md4>
                <v-text-field label="Legal first name*" required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="Legal last name*"
                  hint="example of persistent helper text"
                  persistent-hint
                  required
                ></v-text-field>
              </v-flex>
              <v-flex xs12>
                <v-text-field label="Email*" required></v-text-field>
              </v-flex>
              <v-flex xs12>
                <v-text-field label="Password*" type="password" required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6>
                <v-select
                  :items="['0-17', '18-29', '30-54', '54+']"
                  label="Age*"
                  required
                ></v-select>
              </v-flex>
              <v-flex xs12 sm6>
                <v-autocomplete
                  :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
                  label="Interests"
                  multiple
                ></v-autocomplete>
              </v-flex>
            </v-layout>
          </v-container>
          <small>*indicates required field</small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
          <v-btn color="blue darken-1" flat @click="dialog = false">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

Make Vuetify dialog full screen with scrollable list inside and content on top and bottom

2 Answers