After creating a button that hides all other components on the page except one and expands the remaining one, I am having trouble aligning the expanded component in the center after clicking the button.
If you want to see the current behavior, check out this codepen link.
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.`,
show1: true,
show2: true,
show3: true,
show4: true,
show5: true,
expand1:true
}),
methods: {
hideothers() {
this.show2=!this.show2,
this.show3=!this.show3,
this.show4=!this.show4,
this.show5=!this.show5,
this.expand1=!this.expand1
}
}
})<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>
<!-- top starts here-->
<v-flex d-flex xs12 sm4 child-flex>
<v-card color="orange lighten-2" tile flat v-show="show1">
<v-card-text>Card 1</v-card-text>
<v-btn flat @click="hideothers()">Expand</v-btn>
<v-card-text>
<v-expand-transition>
<div v-show="expand1">This is a short paragraph</div>
</v-expand-transition>
<v-expand-transition>
<div v-show="!expand1">
<p>A looooong</p>
<p>paragraph</p>
</div>
</v-expand-transition>
</v-card-text>
</v-card>
</v-flex>
<v-flex d-flex xs12 sm4 child-flex>
<v-fade-transition>
<v-card color="orange lighten-2" tile flat v-show="show2">
<v-card-text>
<v-layout row wrap>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
<v-flex sm6>
Card1
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-fade-transition>
</v-flex>
<v-flex d-flex xs12 sm4>
<v-card color="red lighten-2" dark tile flat v-show="show3">
<v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
</v-card>
</v-flex>
<!-- TOP part ends here-->
<v-flex d-flex xs12 sm4 child-flex>
<v-card color="purple lighten-1" tile flat v-show="show4">
<v-card-text>{{lorem}}</v-card-text>
</v-card>
</v-flex>
<v-flex xs12 sm4 child-flex v-show="show5">
<v-card color="green lighten-2" tile flat>
<v-card-text>{{lorem}}</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>