Ui-text input value near to label

Dashboard
,
1

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

ui-text

Here is my ui-template code:

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

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

            this.send(
                {topic: "setpoint" ,
                payload: "'" + this.editSetPoint + "'"}
                )
            
        }
    }
    
}
</script>

<style>
</style>
2

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

3

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