CODEWITHSUNDEEP
cssvue.jsvuetify.js
Alex T
Alex T

Reputation: 3754

Vuetify grid column wrap fill full height

After creating component using v-card in grid system id does not fill to the full height. I used d-flex however it does not work as intended.

The middle column with white v-card should fill the whole column height however it stacks at the top. Here is the picture of the desired functionality: enter image description here

And here is the code, in Codepen you can see that it does not extend to the full column height but is nested at the top.

var car = Vue.component('car', {

  template: `
    <div class="car">
         <v-flex d-flex child-flex>
        <v-card >
            <v-card-text>
                <div class="text-center font-weight-black title text--primary">
                    test
                </div>
                <div class="text-center">
                    data
                </div>
            </v-card-text>
        </v-card>
        </v-flex>
    </div>
  `
})

new Vue({
  el: '#app',
  data: () => ({
    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`
  }),
  components: {"car":car}
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm>
      <v-layout row wrap>

        <v-flex d-flex xs12 sm4 child-flex>
          <v-card color="orange lighten-2" tile flat>
            <v-card-text>Card 1</v-card-text>
          </v-card>
        </v-flex>
        
        <v-flex d-flex xs12 sm2>

          <v-layout column wrap>
            <car></car>
            <car></car>
            <car></car>
          </v-layout>
        </v-flex>

        <v-flex d-flex xs12 sm6>
          <v-card color="red lighten-2" dark tile flat>
            <v-card-text>{{ lorem }} {{ lorem }} {{ lorem }} {{ lorem }} {{lorem}}</v-card-text>
          </v-card>
        </v-flex>
   
         <v-flex d-flex xs12 sm4 child-flex>
          <v-card color="purple lighten-1" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        <v-flex xs12 sm2 child-flex>
          <v-card color="green lighten-2" tile flat>
            <v-card-text>{{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        
        <v-flex d-flex xs12 sm6 child-flex>
          <v-card color="blue lighten-2" tile flat>
            <v-card-text>{{lorem}} {{lorem}}</v-card-text>
          </v-card>
        </v-flex>
       
      </v-layout>
    </v-container>
  </v-app>
</div>

Upvotes: 2

Views: 11973

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362380

You can add grow to the car outer div and fill-height to the v-flex...

<div class="car grow">
    <v-flex d-flex child-flex class="fill-height">
      <v-card>
        <v-card-text>
            <div class="text-center font-weight-black title text--primary">
                test
            </div>
            <div class="text-center">
                data
            </div>
        </v-card-text>
      </v-card>
    </v-flex>
</div>

https://codeply.com/p/qOKz9Qsv6L

Upvotes: 4

Fab
Fab

Reputation: 4657

In your car component remove the first div.

var car = Vue.component('car', {
  template: `
     <v-flex d-flex child-flex>
        <v-card >
            <v-card-text>
                <div class="text-center font-weight-black title text--primary">
                    test
                </div>
                <div class="text-center">
                    data
                </div>
            </v-card-text>
        </v-card>
     </v-flex>
  `
})

Upvotes: 1

Related Questions