Reputation: 165

v-card is not being shown completly

I am working with vuetify and I want to implement a Stepper.

Within the stepper I want to have v-card which once clicked on read more would open. So far the functions are working.
The problem is that when I only open a card - meaning in the index.vue I put the card component instead of the stepper, the card opens reacts perfectly. But, when the card is within the stepper component, when I press on read more it is only shown a part of it. I guess some element is having a fixed size and wont resize, but I cannot figure it out where exactly the problem is. Any help is welcomed!
My index.vue file looks like this:

 <template>
    <v-container>
        <v-app>
            <div>
                <Stepper/>
            </div>
        </v-app>
    </v-container>
</template>
<script>
import Stepper from "../components/Stepper.vue";
export default {
    data: () => ({ 
    }),
    components: {Stepper }
}
</script>

The Stepper.vue component looks like this:

<template>
    <v-stepper v-model="e6" vertical ref="stepper">
        <!--- Step 1-->
        <v-stepper-step :complete="e6 > 1" step="1">
        </v-stepper-step>
        <v-stepper-content step="1">
            <Card1 />
        </v-stepper-content>
        <!--- Step 2-->
        <v-stepper-step :complete="e6 > 2" step="2">
        </v-stepper-step>
        <v-stepper-content step="2">
            <Card2 />
        </v-stepper-content>
        <!--- Step 3-->
        <v-stepper-step :complete="e6 > 3" step="3">
        </v-stepper-step>
        <v-stepper-content step="3">
            <Card2 />
        </v-stepper-content>
    </v-stepper>
</template>

The cards inside are from format identical only the text is different. Hence I will post only one card:

<template>
  <v-hover >
    <template v-slot:default="{ hover }">
      <v-card class="mx-auto">
        <v-img class="white--text" src="picture1.png" width="300" height="169">
          <v-card-title class="text-h5">
            {{ $t('welcome_hello') }}
          </v-card-title>
        </v-img>
        <v-card-actions>
          <v-btn text color="teal accent-4" @click="openCard()">
            Learn More
          </v-btn>
        </v-card-actions>

        <v-expand-transition>
          <v-card v-if="reveal" class="transition-fast-in-fast-out v-card--reveal" style="height: 100%;">
            <v-card-text class="pb-0">
              <p class="text-h4 text--primary">
                {{ $t('welcome_message1') }}
              </p>
              <p>{{ $t('welcome_message2') }}</p>
              <p>{{ $t('welcome_message3') }}</p>
            </v-card-text>
            <v-card-actions class="pt-0">
              <v-btn text color="teal accent-4" @click="nextStep()">
                Next
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-expand-transition>

      </v-card>
    </template>
  </v-hover>
</template>

<script>
export default {
  data: () => ({
    reveal: false,
  }),
  methods: {
    openCard() {
      this.reveal = true
    },
    closeCard() {
      this.reveal = false
    },
    completedCard(){

    },
    nextStep() {
      this.closeCard()
      this.$root.$emit('nextStepFunction') //like this    
    },
  }
}

</script>

<style>
.v-card--reveal {
  bottom: 0;
  opacity: 1 !important;
  position: absolute;
  width: 100%;
}
</style>

Upvotes: 0

v-card is not being shown completly

Answers (1)

Related Questions