CODEWITHSUNDEEP
vue.jsvuetify.js
once
once

Reputation: 23

How to remove padding of List item in vuetify

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.

Upvotes: 2

Views: 15030

Answers (5)

user24410644
user24410644

Reputation: 11

Use fluid property in v-list-group component. It is seems that you should write <v-list-group fluid> in your code

Upvotes: 1

bornfree
bornfree

Reputation: 31

It is not correct, but it works:

<v-list-item 
    style="padding-inline-start: 16px !important;"
    :title="item.title"
    :to="item.url"
    :prepend-icon="item.icon"
></v-list-item>

Upvotes: 1

Anindya Manna
Anindya Manna

Reputation: 107

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;
}

Upvotes: 0

Dawid Stefaniak
Dawid Stefaniak

Reputation: 346

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.

Upvotes: 1

Traxo
Traxo

Reputation: 19002

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

Upvotes: 2

Related Questions