CODEWITHSUNDEEP
vue.jsvuetify.js
securisec
securisec

Reputation: 4031

How can I have a wrap horizontal alignment of cards in vuetify 2?

I have a tiny project that I am building using vuetify 2, but the issue I am coming across is in a col with width 7, all my cards are showing up vertically, instead of a horizontal overflow.

What I am hoping to achieve is that the cards are vertical to each other by counts of five, with overflow moving to the second line.

My row arrangement is row > col2 col7 col3 /row. I am not using a v-container because it seems to put a container in the middle and not take up the whole screen.

I have tried using the flex-wrap, flex-column, flex-row etc class based on the vuetify docs, but that doesnt seem to change anything. Most of the examples that I found regarding this is for vuetify 1, and the component structure is different.

Codesandbox

App.vue

<template>
  <v-app>
    <v-app-bar
      color="dark"
      dark dense
    >
    </v-app-bar>

    <v-row no-gutters>
      <v-col fluid cols="2"></v-col>

      <v-col fluid cols="7">
        <HelloWorld v-for="c in 10" :key="c" />
      </v-col>

      <v-col fluid cols="3"></v-col>
    </v-row>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>

HelloWorld.vue

<template>
  <v-card class="mx-auto" max-width="344" outlined>
    <v-list-item three-line>
      <v-list-item-content>
        <div class="overline mb-4">OVERLINE</div>
        <v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
        <v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
      </v-list-item-content>

      <v-list-item-avatar tile size="80" color="grey"></v-list-item-avatar>
    </v-list-item>

    <v-card-actions>
      <v-btn text>Button</v-btn>
      <v-btn text>Button</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  name: "HelloWorld"
};
</script>

What I have at the moment is this: The arrows are showing how I would like the successive card to be next to the card and so forth.

enter image description here

Upvotes: 1

Views: 7332

Answers (1)

Asimple
Asimple

Reputation: 650

If you want to ignore row wrap you can just add .flex-nowrap class:

<v-row class="flex-nowrap">

Update I get it. You paste card inside of col. My bet. You just can do this:

<template>
  <v-app>
    <v-app-bar
      color="dark"
      dark dense
    >
    </v-app-bar>

    <v-row no-gutters>
      <v-col cols="2"></v-col>
      <v-col cols="7">
        <v-row no-gutters>
            <v-col v-for="c in 10" :key="c" cols="4">
                <HelloWorld/>
            </v-col>
        </v-row>
      </v-col>
      <v-col cols="3"></v-col>
    </v-row>
  </v-app>
</template>

Upvotes: 2

Related Questions