Unable to remove white space between v-text-field and labels using vuetify

Question

I'm trying to decrease huge gap between rows using vuetify but could not decrease. I tried by using css and vuetify spacing as well but doesnot work.

Expected form

Actual form

<v-container>
  <v-row>
    <v-col cols="4">
      First Name
    </v-col>
    <v-col cols="4">
      <v-text-field v-model="firstname" :rules="nameRules" label="first name" required class="ma-0 pa-0"></v-text-field>
    </v-col>
  </v-row>
  <v-row>
    <v-col cols="12" md="4">
      Last Name
    </v-col>
    <v-col cols="12" md="4">
      <v-text-field v-model="lastname" :rules="nameRules" label="Last name" required class="ma-0 pa-0"></v-text-field>
    </v-col>
  </v-row>

I got error Trailing spaces not allowed no-trailing-spaces. @depperm — prabina sht, Mar 24 '20 at 13:55
that is not what the question says. See this [question](https://stackoverflow.com/q/58794700/3462319) — depperm, Mar 24 '20 at 13:56
please edit your question to clarify what exactly is wrong. what exactly are you trying to accomplish and why what you've tried doesn't work — depperm, Mar 24 '20 at 14:19
I have edited question. Actually I want to decrease spaces between rows. Sorry i couldn't make you understand properly. @depperm — prabina sht, Mar 24 '20 at 15:00
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/210238/discussion-between-depperm-and-prabina-sht). — depperm, Mar 24 '20 at 15:04

score 0 · Answer 1 · answered Apr 06 '20 at 18:57

0

Use classes 'ma-x' or 'pa-x' for removing extra padding and margin from row and cols where x id number from 0-12.

Please refer: https://vuetifyjs.com/en/styles/spacing/

answered Apr 06 '20 at 18:57

Pallavi

21
7

Unable to remove white space between v-text-field and labels using vuetify

1 Answers1