CODEWITHSUNDEEP
cssvuejs2flexboxvuetify.js
Denis Stephanov
Denis Stephanov

Reputation: 5241

Scrollable card content with Vuetify

Hello I am trying to create scrollable content in card with flex util classes and components of Vuetify but I am unsuccessful. He is my last version of code which I tried:

https://codesandbox.io/embed/sharp-kilby-g3e4t?fontsize=14&hidenavigation=1&theme=dark

This is my expectation is this:

enter image description here

I found some samples with pure flex but I am not able did it with Vuetify? Can you help me edit codesandbox to make it working? Thank you.

Upvotes: 3

Views: 13312

Answers (3)

Sphinx
Sphinx

Reputation: 10729

Uses the component=v-virtual-scroll built in Vuetify will be one solution.

for example:

        <v-card class="flex-grow-0">
          <v-virtual-scroll
            :items="Array.from({length: 100}).map((_, index) => index)"
            :item-height="50"
            height="300"
          >
            <template v-slot="{ item }">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Item {{ item }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>
          </v-virtual-scroll>
        </v-card>

Updated CodeSandBox

Upvotes: 2

Syed
Syed

Reputation: 16513

This question is much related to CSS than Vuetify, so let me explain you how you can fix it. Say that your markups render in the browser like below html, either style v-card__text or add your custom class my-list, if you are using v-card__text to style then make sure to add scoped to style tag in your component else this will effect entire project.

<div class="v-card v-sheet theme--light">
  <div class="v-card__title">You Title goes here</div>
  <div class="v-card__text my-list">
    <ul>
      <li>Text</li>
      ...
    </ul>
  </div>
</div>

<style scoped>
  .my-list {
    // For eg. here 200px is MainNavBar + TitleBar and some padding/margins
    // keep on increasing height if you have more items placed above the v-card
    height: calc(100vh - 200px);
    overflow-y: auto;
  }
</style>

Upvotes: 2

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

You can set the height to the v-list then make it scrollable using overflow-y: scroll;

<!-- Set height to your `<v-list>` and add `overflow-y: scroll` -->
<v-list style="height: 250px; overflow-y: scroll">
  <v-list-item-group color="primary">
    <v-list-item v-for="(n) in 100" :key="n">
      <v-list-item-content>
        <v-list-item-title>Item {{ n }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list-item-group>
</v-list>

I've edited your code and here is a working example at codesandbox.

Here is a sample output of what you want based on your sketch. enter image description here

Upvotes: 2

Related Questions