CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
Sarwan Nizamani
Sarwan Nizamani

Reputation: 135

Why content of <div> inside v-card is a bit out from card?

Can you guys please tell my why content inside my v-card is a bit out from left? when i have to to make it inside to do that i am giving class of ml-3 to make it inside, but why it is not staying inside that?

    <template>
      <div>
        <h1 class="overline teal--text my-3">Dashboard</h1>
        <v-container class="my-5">
          <v-card flat >
            <v-layout row wrap>
              <v-flex xs12 md6 >
                <div class="caption teal--text">
                  Project Title
                </div>
                <div>Create New Website</div>
              </v-flex>
            </v-layout>
          </v-card>
        </v-container>
      </div>
    </template>

and also check the picture below for reference enter image description here

Upvotes: 1

Views: 1305

Answers (1)

Hexodus
Hexodus

Reputation: 12927

The main reason is that v-card doesen't add padding and needs some of it's subcomponents to do this. I usually use v-card-text as wrapper for own elements. As far as I know there is also no 'v-flex' in vuetify 2.x any more. You can just use v-row that allready uses flex.

See my example Codepen

<template>
  <div>
   <v-container class="my-5">
    <h1 class="overline teal--text my-3">Dashboard</h1>
      <v-card flat>
        <v-card-text>
              <div class="caption teal--text">
              Project Title
            </div>
            <div>Create New Website</div>        
        </v-card-text>
      </v-card>
    </v-container>
  </div>
</template>

Using v-row instead of div's

<template>
  <div>
   <v-container class="my-5">
    <h1 class="overline teal--text my-3">Dashboard</h1>
      <v-card flat>
        <v-card-text class="py-0">
          <v-row>
            <v-col cols="12" class="pb-0 caption teal--text">
              Project Title
            </v-col>
            <v-col cols="12" class="pt-0">
              Create New Website
            </v-col>
          </v-row>    
        </v-card-text>
      </v-card>
    </v-container>
  </div>
</template>

Upvotes: 2

Related Questions