Working in Vuetify, I want to position the v-btn at the bottom of the v-card, having several v-cards now each one appears at one height, because not all of them have the same data and there is empty data.
<v-col v-for="t in info" :key="t.id" cols="12" sm="12" md="6" lg="6" xl="3">
<v-card height="100%" elevation="3" class='rounded-0'>
<v-container>
<v-row dense>
<v-col cols="12 my-0 py-0">
<span class='text-body-2 font-weight-bold ma-0 pa-0'> {{t.titulo}} </span>
</v-col>
</v-row>
<v-row dense>
<v-col cols="12 my-0 py-0">
<span class='text-body-2 ma-0 pa-0'> {{t.subtitulo}} </span>
</v-col>
</v-row>
<v-row dense>
<v-col cols="12 my-0 py-0">
<span class='text-caption ma-0 pa-0'> {{t.texto1}} </span>
</v-col>
</v-row>
<v-spacer></v-spacer>
<v-row dense>
<v-col cols="12 my-0 py-0">
<span class='text-caption ma-0 pa-0'> {{t.texto2}} </span>
</v-col>
</v-row>
<v-card-actions class="px-0">
<v-btn small color="blue-grey" class="white--text" @click='funcion(t)'> <v-icon>mdi-magnify</v-icon></v-btn>
</v-card-actions>
</v-container>
</v-card>
</v-col>
What is the way to position the button always in the same position, in this case, at the end of the v-card? I've seen https://stackoverflow.com/questions/56703740/how-to-bottom-align-button-in-card-irrespective-of-the-text-in-vuetify but I can't get it.
The solution in the answer you share from the English version of SO does not work, because their version of the vue component has a different structured code than yours. In your case you should apply the css in the following way (the names of the classes that I have put are only for an easier identification of the elements):
CSS:
In this way you will give a specific position to the button. By using position:relative for the container and then position:absolute on the element you want to place at a particular point, you can play around with its x/y coordinates within the containing element. You do this in this case with the css property bottom: 0 .