Vuetify changing form input width-CodePudding

I am trying to change the size of v-text-field in my form. I tried to use width and fullWidth but I couldn't change it. And also I couldn't give space between form elements.

Basically, I want to make a search field width: 80% of my container and give space between v-btn and v-text-field

My Code is here.

<template>
  <v-container>
    <v-row >
      <v-col>
        <h2 >Giphy Search App</h2>
        <form>
          <v-text-field v-model="search" label="Search" required></v-text-field>
          <v-btn  @click="submit">submit</v-btn>
        </form>
      </v-col>
    </v-row>
  </v-container>
</template>

CodePudding user response：

You can use grid-system. To adjust the width of individual system blocks, you just need to set the width from 1 to 12 (optional)

                <form>
                  <v-row>
                    <v-col cols="10">
                      <v-text-field v-model="search" label="Search" required></v-text-field>
                    </v-col>
                    <v-col cols="2">
                      <v-btn @click="submit">submit</v-btn>
                    </v-col>
                  </v-row>
                </form>

Example:

var vm = new Vue({
  el: "#apps",
  vuetify: new Vuetify(),
  data() {
    return {
      search: '',
    }
  },
  methods: {
    submit() {},
  },
});

<html style="overflow-y: auto;">

<head>
  <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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
</head>

<body>
  <div id="apps">
    <v-app flat>
      <v-main>
        <v-sheet>
          <v-container>
            <v-row >
              <v-col>
                <h2 >Giphy Search App</h2>
                <form>
                  <v-row>
                    <v-col>
                      <v-text-field v-model="search" label="Search" required></v-text-field>
                    </v-col>
                    <v-col cols="2">
                      <v-btn @click="submit">submit</v-btn>
                    </v-col>
                  </v-row>
                </form>
              </v-col>
            </v-row>
          </v-container>
        </v-sheet>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</body>

</html>

CodePudding user response：

You can do this in two ways-

Using flex helpers.

using the grid system.

<v-row>
  <v-col> </v-col>
  <v-col> </v-col>
</v-row>

Below is a working demo of both methods.

<!DOCTYPE html>
<html>
  <head>
    <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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-container>
          <!-- Using flex classes -->
          <h2 >Using Flex Helpers</h2>
          <form >
            <v-text-field v-model="search" label="Search" required></v-text-field>
            <v-btn>submit</v-btn>
          </form>
          <!-- Using grid system -->
          <h2 >Using Grid System</h2>
          <form>
            <v-row>
              <v-col >
                <v-text-field v-model="search" label="Search" required></v-text-field>
              </v-col>
              <v-col cols="3">
                <v-btn @click="submit">submit</v-btn>
              </v-col>
            </v-row>
          </form>
        </v-container>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
         return {
          search: null,
         }
        },
        vuetify: new Vuetify(),
      })
    </script>
  </body>
</html>