CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
Nika Kurashvili
Nika Kurashvili

Reputation: 6472

show form as dropdown to button (vuetify)

I have a v-btn.

When clicked on it, I want to have a dropdown to it. I don't want the dropdown to be a list, but the form with 3 labels and 3 text fields. Each label for each textfield.

Problem 1) When showing labels and textfields, they are all at the same line(horizontally). how do I make label and textfield below it?

Problem 2) WHen that dropdown appears and I put mouse on textfield, dropdown completely closes. I only want to close it when i click the button which also resides on that dropdown at the end of the form. how do I not close it when clicked on it ?

P.S. I am using v-menu for dropdown.

Upvotes: 1

Views: 2266

Answers (2)

Turtlefight
Turtlefight

Reputation: 10800

Problem 1
Can you please provide a small example of your code?
In Vuetify you can just use a v-text-field and give it a label via the label prop.

Problem 2
You can set close-on-click and close-on-content-click to false to prevent the dropdown from closing.

Small example:

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      menuOpen: false,
      firstname: "",
      lastname: ""
    };
  },
  methods: {
    save() {
      alert(`Your name is ${this.firstname} ${this.lastname}!`);
      this.menuOpen = false;
    }
  }
});
#app { height: 400px; }
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-menu offset-y :close-on-click="false" :close-on-content-click="false" v-model="menuOpen">
        <template v-slot:activator="{ on }">
          <v-btn v-on="on" class="ma-4">BUTTON</v-btn>
        </template>
        <v-card>
          <v-card-text>
            <v-text-field label="First Name" v-model="firstname"></v-text-field>
            <v-text-field label="Last Name" v-model="lastname"></v-text-field>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="grey darken-2" @click="menuOpen = false" dark>CANCEL</v-btn>
            <v-btn color="primary" @click="save">OK</v-btn>
          </v-card-actions>
        </v-card>
      </v-menu>
    </v-content>
  </v-app>
</div>

Upvotes: 3

Cathy Ha
Cathy Ha

Reputation: 1677

1) Vuetify text fields have a prop named "label" - if you bind the label text to this prop it'll automatically appear above the text field. Otherwise, if you for some reason want to create your own label, just wrap both the label and input in a v-layout OR wrap the label and input in the same element (e.g. div) and make sure the label is a div

          <v-flex xs12 sm6>
            <div>test label</div>
            <v-text-field
              v-model="title"
              :rules="rules"
              counter="25"
              label="Outline"
              outline
            ></v-text-field>
          </v-flex>

2) the menu has a "close-on-content-click" prop that defaults to true, which you can set to false. This will prevent the menu from closing on click

Upvotes: 0

Related Questions