# Ui-text input value near to label

**URL:** <https://discourse.nodered.org/t/ui-text-input-value-near-to-label/87074>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-template\
**Created:** [8 April 2024 11:09 UTC](https://discourse.nodered.org/t/ui-text-input-value-near-to-label/87074 "2024-04-08T11:09:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![zyx09](https://avatars.discourse-cdn.com/v4/letter/z/f19dbf/32.png) [@zyx09](https://discourse.nodered.org/u/zyx09)\
**Post date:** [8 April 2024 11:09 UTC](https://discourse.nodered.org/t/ui-text-input-value-near-to-label/87074/1 "2024-04-08T11:09:15Z")

</div>

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

![ui-text](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/1/f193d24a873f3dd0122918ac1bf9af248a3dcf54.jpeg)

Here is my ui-template code:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [16 April 2024 13:14 UTC](https://discourse.nodered.org/t/ui-text-input-value-near-to-label/87074/2 "2024-04-16T13:14:01Z")

</div>

Very short term fix is:

```css
.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](https://github.com/FlowFuse/node-red-dashboard/pull/774)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 May 2024 13:15 UTC](https://discourse.nodered.org/t/ui-text-input-value-near-to-label/87074/3 "2024-05-16T13:15:02Z")

</div>

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