Ui-text input value near to label

Hi, i need some help.
How to make a distance in between label and input value?


Here is my ui-template code:

            <v-text-field label="Setpoint:" v-model="editSetPoint" 
                placeholder="set point" base-color="white">
                <template v-slot:append>
                        <template v-slot:activator="{ props }">
                            <v-btn v-bind="props" class="mt-n2" @click="set_point">
    export default {
    data() {
        return { 
            editSetPoint: ''

    methods: {
        set_point() {
            // editSetPoint is in the format 'YYYY-MM-DD HH:mm:ss'

                {topic: "setpoint" ,
                payload: "'" + this.editSetPoint + "'"}


Very short term fix is:

.v-field__input {
    --v-field-input-padding-top: 21px;
    --v-field-input-padding-bottom: 4px;

However, the actual, proper fix is for me to fix this as a bug, as the override of those values I set should not be applied to this input type - which I'll push now.

PR Opened: Only apply the padding top/bottom changes for v-text-field to outlined variant by joepavitt · Pull Request #774 · FlowFuse/node-red-dashboard · GitHub

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.