Vuetify Version: 2.2.4
Vue Version: 2.6.10
Browsers: Chrome 79.0.3945.117
OS: Linux x86_64
In navigation drawer component:
v-list-itemv-list-item-icon with v-iconmini-variantv-list-itemWhen clicking on the list-item and having the icon not moving
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:
v-ripple containerThis 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.
Duplicate of #2830, #8007, #9498
If you have any additional questions, please reach out to us in our Discord community.
The error persists, it has not been solved
Environment
Vuetify Version: 2.2.4
Vue Version: 2.6.10
Browsers: Chrome 79.0.3945.117
OS: Linux x86_64Steps to reproduce
In navigation drawer component:
- Add a
v-list-item- Add a
v-list-item-iconwithv-icon- Set navigation drawer to
mini-variant- Click on
v-list-itemExpected 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 containerclass - .v-application--is-ltr .v-list-item__icon:last-of-type:not(:only-child)
- margin-left:16px
Reproduction Link
You could have solved it another way
I was able to confirm @aldd-cangulor's post that the issue lies with v-ripple after removing ripple effect.
Most helpful comment
The error persists, it has not been solved