CODEWITHSUNDEEP
cssvue.jsvuetify.js
user762579
user762579

Reputation:

Vue.js - Vuetify layout issue with v-card

When I insert a text inside a v-card-text tag ,the v-card is centered centered in all viewports

html 

<div id="app">
  <v-app id="inspire">
    <v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="100vh">
      <v-layout row wrap align-center justify-center>
        <v-flex xs6 offset xs-1 sm6 offset-sm1 md6 offset-md1>
            <v-card class="elevation-0">
              <v-card-title primary-title class="layout justify-center">
                <h1>TITLE</h1>
                </v-card-title>
              <v-card-text>
                ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus enim et justo eleifend pharetra. Nam consectetur, nulla in viverra mattis, ipsum libero faucibus odio, at eleifend mauris arcu non nibh. Aliquam congue augue sed sapien tristique, eget faucibus risus pulvinar. Nullam ut nunc felis.
              </v-card-text>
            </v-card>
         </v-flex>
      </v-layout>
    </v-parallax>
  </v-app>
</div>

css

.parallax {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.card__text {
  font-size: 1.2em;
  padding-top: 0;
  padding-bottom: 7%;
}

see codepen

HOWEVER , if I insert a button inside the v-card-text tags, then the behavior is nor the same, not centered , not centered

html

<div id="app">
  <v-app id="inspire">
    <v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="100vh">
      <v-layout row wrap align-center justify-center>
            <v-card class="elevation-0">
              <v-container>
                <v-layout column align-center justify-center >
              <v-card-title primary-title>
                <h1>TITLE</h1>
                </v-card-title>
              <v-card-text>
                <v-btn round class="primary" large href="#">SIGN UP</v-btn>
              </v-card-text>
                  </v-layout
                </v-container>
            </v-card>
      </v-layout>
    </v-parallax>
  </v-app>
</div>

css

.parallax {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.card__text {
  font-size: 1.2em;
  padding-top: 0;
  padding-bottom: 7%;
}

see codepen

How can I auto center the v-card with the title / button in all viewports ?

thanks for feedback ..

btw , is there any good link to vuetify layout examples / tuts ???

Upvotes: 3

Views: 18992

Answers (2)

user762579
user762579

Reputation:

SOLVED : I should remove the display: flex; i the .parallax CSS !

<div id="app">
  <v-app id="inspire">
    <v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="100vh">
<v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs6 offset-xs3>
          <v-card color="grey">
            <v-card-title primary-title class="layout justify-center"><h1>TITLE</h1></v-card-title>
            <v-card-text>
              <v-btn round class="primary" large href="#">SIGN UP
                </v-btn>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
      </v-parallax>
  </v-app>
</div>


.parallax {
  min-height: 100vh;
  align-items: center;
}
.card__text {
  font-size: 1.2em;
  padding-top: 0;
  padding-bottom: 7%;
}

this output

see codepen

Upvotes: 2

nizantz
nizantz

Reputation: 1621

Add the button in a flex in the v-card or v-card-text as below and it should work:

          <v-flex text-xs-center>
            <v-btn>Action</vbtn>                
          </v-flex>

Upvotes: 4

Related Questions