How to remove padding of List item in vuetify

Question

When coding Vue project with vuetify, I found there are useless padding in <v-list> tag, in detail, it is about <v-list-tile> tag.

image: https://segmentfault.com/img/bVbtemC?w=890&h=1288

There are one parent list item and one child list item, and there are some padding space in left and right.

I have followed official methods to set class="pa-0", however, it does not work when I add this class to all the tags around.

And of course set CSS directly does not work too, the image above shows that the target tag is the one with class="v-list__tile", but CSS on this class still does not work.

  <v-navigation-drawer width="200px" stateless value="true"
    class="transparent">
    <v-list subheader dense expand>
      <v-list-group no-action>
        <template v-slot:activator>
          <v-list-tile class="pa-0">
            <v-icon left>home</v-icon>
            <v-list-tile-title>menu-name-m</v-list-tile-title>
          </v-list-tile>
        </template>

        <v-list-tile class="pa-0" @click="onMenuCliked">
          <v-list-tile-title>no child - menu-name</v-list-tile-title>
        </v-list-tile>

      </v-list-group>
    </v-list>
  </v-navigation-drawer>

This is my code partly, it is in vue-cli.

I know remove no-action in <v-list-group> tag works on child list item, but it is not the way I want, and this does not work on the parent one.

I hope I can control the green padding in the image above, or juest remove it.

Answer 1

v-list-item renders the following html

<div role="listitem">
  <div class="v-list__tile theme--light">

  </div>
</div>

So setting the class appends it to the parent div, instead of v-list__tile - which is the actually div with the padding.
Sometimes vuetify way around this is using the content-class prop instead, but this component does not seem to support it, so you gotta target it by css, for example

.v-list__tile {
  padding: 0  
}

You could still use class if you want more specificity:

<v-list-tile class="my-tile">

.my-tile .v-list__tile {
  padding: 0  
}

If it's not working and you are using scoped styles, see more

Answer 2

V-list is adding only left padding, so you can just simply remove it without setting all paddings to 0.

To remove left padding only you can simply add 'pl-0' class to your v-list-tile.

<v-list-tile class="pl-0">

Read more about spacing here.

Answer 3

The way I solved a similar problem is to add this in the style:

<style scoped lang="scss">
::v-deep .v-list-item {
  padding: 0;
}