How do I position the buttons at the bottom in the q-input field?

Question

How do I make the q-input buttons appear at the bottom with the autogrow property?

Reproduction URL

https://codepen.io/timamus/pen/bGJyYzP

Code

<div id="q-app">
    <div class="q-ma-md">
        <q-layout view="lHh Lpr lFf">
            <q-footer class="custom-footer">
                <q-input
                    outlined
                    bottom-slots
                    v-model="newMessage"
                    label="Send a message"
                    :dense="dense"
                    class="q-pa-md my-input"
                    autogrow
                >
                    <template v-if="newMessage" v-slot:append>
                        <q-icon
                            name="cancel"
                            @click.stop.prevent="newMessage = null"
                            class="cursor-pointer"
                        />
                    </template>
                    <template v-slot:after>
                        <q-btn
                            round
                            dense
                            flat
                            icon="send"
                        />
                    </template>
                </q-input>
            </q-footer>
        </q-layout>
    </div>
</div>

Answer 1

You can add classes flex items-end to your q-input to move the send button down.

Add this additional css to move the cancel button to the bottom. Caution: you probably need to make the selector more specific or scope it to the current component to not affect other elements.

.my-input .q-field_append {
  align-self: flex-end;
}