Vuetify: scroll list inside card

Question

How to set the right size of vuetify card's content to enable scrolling? Unfortunatly, vuetify documentation shows only the simplest cases with not real-looking data. Here is list and footer inside card:

https://jsfiddle.net/Feofilakt/0Lnzteqm/

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  methods: {},
  data: {}
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>

<div id="app">
  <v-app>
    <v-card height="400px">
      <v-toolbar card>
        <v-toolbar-title>Title</v-toolbar-title>
      </v-toolbar>

      <v-divider></v-divider>

      <v-card-text>
        <v-list>
          <template v-for="i in 40">
            <v-list-tile>
              <v-list-tile-content>
                <div>{{ i }}</div>
              </v-list-tile-content>
            </v-list-tile>
          </template>
        </v-list>

        <v-footer>
          <div>Footer</div>
        </v-footer>
      </v-card-text>
    </v-card>
  </v-app>
</div>

Solution 1

Found a solution. Need to apply flexbox styles to parts of v-card component:

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  methods: {},
  data: {}
});

html {
  overflow: hidden !important;
}

.v-card {
  display: flex !important;
  flex-direction: column;
}

.v-card__text {
  flex-grow: 1;
  overflow: auto;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-card height="200px">
      <v-toolbar card>
        <v-toolbar-title>Title</v-toolbar-title>
      </v-toolbar>

      <v-divider></v-divider>

      <v-card-text>
        <v-list>
          <template v-for="i in 40">
            <v-list-tile>
              <v-list-tile-content>
                <div>{{ i }}</div>
              </v-list-tile-content>
            </v-list-tile>
          </template>
        </v-list>
      </v-card-text>

      <v-footer class="pa-2">Footer</v-footer>
    </v-card>
  </v-app>
</div>

Solution 2

You can solve this with css

HTML

<v-card height="400px" class="scroll">
  .....
</v-card>

CSS

.scroll {
   overflow-y: scroll
}

Comments

[Feofilakt]

In this case the title will disappear if you scroll down. Usuallly only content must be scrolling.

[dreijntjens]

Then you add the class on the v-card-text instead of v-card. but then you've to set overflow on the card it self to hidden.

[Feofilakt]

I've added the fiddle, could you please show changes there?

[Feofilakt]

There is excess space in your example between footer and bottom of the card.

[dreijntjens]

play around with the height of your components.