Как сделать так, чтобы кнопки q-ввода отображались внизу с помощью свойства autogrow?
URL-адрес воспроизведения
https://codepen.io/timamus/pen/bGJyYzP
Код
<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>
Вы можете добавить курсы flex items-end
в свой q-input
, переместив кнопку отправки вниз.
Добавьте этот дополнительный CSS, чтобы переместить кнопку отмены вниз. Внимание: вам, вероятно, придется сделать селектор более конкретным или ограничить его текущим компонентом, чтобы не влиять на другие элементы.
.my-input .q-field_append {
align-self: flex-end;
}
Попробуйте обернуть его селектором :deep.
Спасибо! Этот стиль
.my-input .q-field_append { align-self: flex-end; }
не работал в моем коде, потому что он был в теге <style Scod>.