CODEWITHSUNDEEP
cssvue.jsvuetify.js
LiteralGoat
LiteralGoat

Reputation: 131

How to remove text area bottom margin in vuetify?

Hey I have this code: 

    <v-text-field 
  :rules="rules" 
  v-model="exam.title"
  class="exam-title ma-0 pa-0"
  ></v-text-field>
<v-text-field class="exam-title ma-0 pa-0"></v-text-field>

And then it has some margin or padding on the bottom which I cannot remove with a class. How do I get rid of this?

enter image description here

Problem is fixed by wrapping it inside another element as such:

<v-col lg="8">
      <v-text-field 
        v-model="questions.question"
        class="question-container-question"
      ></v-text-field>
</v-col>

Upvotes: 1

Views: 3050

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362760

I've run into the same problem and found that it helps to set the hide-details prop...

<v-text-field hide-details class="exam-title">
</v-text-field>

https://codeply.com/p/d2SVndXmVi

Upvotes: 9

LiteralGoat
LiteralGoat

Reputation: 131

I found an answer. When I wrap it in a v-card it seems to remove the padding or margin by default. Strange though that this is the case without a containing component.

Upvotes: 0

Related Questions