У меня есть v-card
компонент и v-card-actions
с двумя кнопками. В моей форме пользователь может ввести изображение, и высота компонента будет увеличиваться при загрузке изображения пользователем, поэтому кнопки будут перемещаться до конца страницы, и пользователь должен прокрутить экран, чтобы увидеть его. Я хочу исправить кнопки, как фиксированный нижний колонтитул.
<v-card>
<v-card-title primary-title class="title">Registrar pagamento de mensalidade</v-card-title>
<v-layout row class="pa-10">
<v-flex xs12>
<v-radio-group v-model="paymentType" row>
<v-radio :label="getCurrentMonthText()"></v-radio>
</v-radio-group>
</v-flex>
<v-row>
<v-col width="auto">
<v-text-field
v-money="money"
v-model="transaction.value"
label="Valor R$"
prepend-icon="attach_money"
/>
<v-text-field
readonly
label="Data"
v-model="localeDate"
prepend-icon="calendar_today"
/>
<div>
<v-file-input
label="Foto do comprovante"
prepend-icon="mdi-camera"
type="file"
@click:clear="onClearFile"
@change="onFileSelected"
accept="image/*"
/>
</div>
<v-img
v-if="imageReceipt.urlFile != ''"
:src="imageReceipt.urlFile"
max-height="300px"
max-width="300px"
></v-img>
</v-col>
</v-row>
</v-layout>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn raised absolute left color="blue" class="white--text" @click="savePayment()">Salvar</v-btn>
<v-btn
raised
color="red"
@click="$emit('hidePayMonthlyDialog')"
class="white--text"
>Cancelar</v-btn>
</v-card-actions>
</v-card>
Текущее поведение:
![enter image description here](https://i.stack.imgur.com/8zKC5.gif)
Бонус: Как мне расположить кнопки, чтобы разделить всю ширину vue пробел?