alignment/position of input field not inline in vue using vuetifyjs

Question

Not sure why my pick a date is position alittle down as compare to select a date and pick a time field.

<template>

Add Date for workshop

<v-layout align-space-around justify-center row fill-height>

    <v-flex xs12 sm6>
        <v-overflow-btn
            :items="menuWsNames"
            label="Pick a Workshop"
            target="#dropdown-example"
            v-model="pickedWsName"
            :rules="[v => !!v || 'Item is required']"
            required
        ></v-overflow-btn>
    </v-flex>

    <v-flex xs12 sm2>
        <v-menu
          :close-on-content-click="false"
          v-model="isDateShow"
          :nudge-right="40"
          lazy
          transition="slide-y-transition"
          offset-y
          full-width
          min-width="290px"
        >
            <v-text-field
                slot="activator"
                v-model="pickedDate"
                label="Select a date"
                :rules="[v => !!v || 'Item is required']"
                readonly
                required
            ></v-text-field>
            <v-date-picker 
                v-model="pickedDate" 
                @input="isDateShow = false"
            ></v-date-picker>
        </v-menu>
    </v-flex>

    <v-flex xs12 sm2>
        <v-menu
            ref="menu"
            :close-on-content-click="false"
            v-model="isTimeShow"
            :nudge-right="40"
            :return-value.sync="pickedStartTime"
            lazy
            transition="slide-y-transition"
            offset-y
            full-width
            max-width="290px"
            min-width="290px"
        >
            <v-text-field
                slot="activator"
                v-model="pickedStartTime"
                label="Pick a time"
                :rules="[v => !!v || 'Item is required']"
                readonly
                required
            ></v-text-field>
            <v-time-picker
                v-if="isTimeShow"
                v-model="pickedStartTime"
                full-width
                @change="$refs.menu.save(pickedStartTime)"
            ></v-time-picker>
        </v-menu>
    </v-flex>

    <v-flex xs12 sm2>
        <v-btn 
            large
            :loading="!isBtnActive"
            @click="submit"
            :disabled="!isBtnActive"
        >Add Date</v-btn>
    </v-flex>
</v-layout>
</v-form>

Jeremy Walters · Accepted Answer · 2018-11-08 15:51:06Z

2

Looking at <v-overflow-btn mt-0 pt-0. mt-0 and pt-0 doesn't seem to be properties of overview btn component. So you need to specify it as a class.

<v-overflow-btn class="mt-0 pt-0"

https://codepen.io/Jubels/pen/mQPrZy?&editors=101

Sidenote: If you dont want to the overflow btn(with the weird line on top) you can just use the selection component

Edit:

If you look at the overflow btn component . You will see that it doesn't have any display properties. So mt-0 wont have any effect. Vuetify has a few global utility classes which you can on any component. For example this is the spacing utility classes.

edited Nov 8, 2018 at 15:51

answered Nov 8, 2018 at 15:26

Jeremy Walters

2,15219 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

phongyewtong Over a year ago

let me try this out

phongyewtong Over a year ago

another question, how do i remove the top line from the "Pick a workshop" like the others?

Jeremy Walters Over a year ago

The vuetifyjs.com/en/components/selects component is similar. Might want to use that.

Collectives™ on Stack Overflow

alignment/position of input field not inline in vue using vuetifyjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related