Vuetify: [Bug Report] Clicking on list-item moves icon when there are no list-item-content in navgation drawer

[nathakits]

Environment

Vuetify Version: 2.2.4
Vue Version: 2.6.10
Browsers: Chrome 79.0.3945.117
OS: Linux x86_64

Steps to reproduce

In navigation drawer component:

1. Add a v-list-item
2. Add a v-list-item-icon with v-icon
3. Set navigation drawer to mini-variant
4. Click on v-list-item

Expected Behavior

When clicking on the list-item and having the icon not moving

Actual Behavior

Click on list-item with only v-list-icon moves the icon to the right

You will see the icon jumping to the right due to:

• span tag v-ripple container
• class - .v-application--is-ltr .v-list-item__icon:last-of-type:not(:only-child)
  
  
  
  • margin-left:16px
  
  

Reproduction Link

https://codepen.io/nathakits/pen/dyPgbwx

[johnleider]

This is caused by https://github.com/vuetifyjs/vuetify/blob/2c901ba806db5a20af342c0eaa2b28634b114924/packages/vuetify/src/components/VList/VListItem.sass#L111 . When the ripple happens it causes the item to not be the only element breaking the css.

[johnleider]

Duplicate of #2830, #8007, #9498

If you have any additional questions, please reach out to us in our Discord community.

[aldd-cangulor]

The error persists, it has not been solved

[aldd-cangulor]

Environment

Vuetify Version: 2.2.4
Vue Version: 2.6.10
Browsers: Chrome 79.0.3945.117
OS: Linux x86_64

Steps to reproduce

In navigation drawer component:

1. Add a v-list-item
2. Add a v-list-item-icon with v-icon
3. Set navigation drawer to mini-variant
4. Click on v-list-item

Expected Behavior

When clicking on the list-item and having the icon not moving

Actual Behavior

Click on list-item with only v-list-icon moves the icon to the right

You will see the icon jumping to the right due to:

• span tag v-ripple container

• class - .v-application--is-ltr .v-list-item__icon:last-of-type:not(:only-child)

  • margin-left:16px

Reproduction Link

https://codepen.io/nathakits/pen/dyPgbwx

You could have solved it another way

[cookmscott]

I was able to confirm @aldd-cangulor's post that the issue lies with v-ripple after removing ripple effect.