CODEWITHSUNDEEP
javascripthtmlvuetify.js
drake035
drake035

Reputation: 2877

How to remove padding or margin in Vuetify?

The doc tells me I can use a helper class to change padding/margin. I want to remove padding from an input field, so the class I need is pa-0 ({property}{direction}-{size}):

<v-text-field v-model="mon" pa-0 solo></v-text-field>

JSFiddle here

Doesn't work. Any idea?

EDIT: I realise I obtain a completely different markup in my JSFiddle compared to my local setup, which compounds my confusion:

Markup generated by Vuetify locally (here I want to remove vertical padding inside the <input> element and horizontal padding on <div class="v-input__slot"> element):

<div class="v-input v-text-field v-text-field--enclosed v-text-field--outline v-input--is-label-active v-input--is-dirty theme--light">
  <div class="v-input__control">
    <div class="v-input__slot" style="">
      <div class="v-text-field__slot">
        <input type="text" pa-0="">
      </div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages theme--light">
        <div class="v-messages__wrapper"></div>
      </div>
    </div>
  </div>
</div>

Markup generated by Vuetify on JSFiddle using the exact same line of Vuetify code (<v-text-field v-model="mon" pa-0 outline></v-text-field>):

<div class="input-group input-group--text-field">
  <div class="input-group__input">
    <input outline="" pa-0="" tabindex="0" type="text">
  </div>
  <div class="input-group__details">
    <div class="input-group__messages"></div>
  </div>
</div>

The lack of examples throughout the docs REALLY doesn't help.

Upvotes: 17

Views: 49933

Answers (3)

DigitalDirk
DigitalDirk

Reputation: 190

Updated answer for Vue3

The accepted answer requires you to include the whole tree like:

.custom-text-field.v-text-field.v-text-field--enclosed .v-input__slot {padding: 0;}

Vue does have a easier method available for this, called deep selectors.

Instead of the code snippet above it would look like this in Vue2 :

.custom-text-field /deep/ .v-input__slot { padding: 0; }

In Vue3 it would look like this for a v-text-field (note the different class).

.custom-text-field /deep/ .v-field__input { padding: 0; }

Upvotes: 0

serge
serge

Reputation: 15219

Use the hide-details option: <v-text-field hide-details></v-text-field> to remove the bottom margin, that appears because of the details field used to display details, if available.

Upvotes: 63

Traxo
Traxo

Reputation: 19002

use spacing helpers:

class="ma-0" removes margins
class="pa-0" removes padding
class="ma-0 pa-0" removes both

Note that these are also props but only for some (grid) components so for example:
<v-text-field class="pa-0"></v-text-field> will work,
and <v-text-field pa-0></v-text-field> will not work.

Classes are added on top-level element so if in some components you can't remove child-element(s) spacing with these classes, then likely you need to target relevant elements with CSS.

To avoid using !important, add custom class on the component and inspect element which you want to edit and then check what's used for targeting it - for example .v-input__slot (we only need highlighted target):

enter image description here

Then replace it like so (custom-text-field is arbitrary custom class applied to the component) 

.custom-text-field.v-text-field.v-text-field--enclosed .v-input__slot {
  padding: 0;
}

Upvotes: 25

Related Questions