Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report] v-list-item misalignment

See original GitHub issue

Environment

Vuetify Version: 2.0.1 Vue Version: 2.6.10 Browsers: Chrome 75.0.3770.142 OS: Windows 10

Steps to reproduce

Just toggle the menu

Expected Behavior

Perfectly vertically-aligned v-list-item contents

Actual Behavior

The icon part is misaligned. Inserting only 2 childs is fine though.

Reproduction Link

Codepen link

Other comments

This issue can be solved with align-self: center in the v-list-icon but, maybe it doesn’t meant to be vertically-centered at all?

Note: v-list-icon is undocumented in v-list documentation, but the documentation used it in one of the example.

Issue Analytics

State:
Created 4 years ago
Comments:8 (6 by maintainers)

Top GitHub Comments

2reactions

nekosaurcommented, Aug 5, 2019

I’d imagine centering things would be the ideal/expected result in most cases

0reactions

johnleidercommented, Jun 8, 2021

This is the default behavior in v3 for v-list and only aligns to the top when using lines=“three”. In addition, the recommended way to do this within a card is using the new props or through the default slot.

https://codepen.io/johnjleider/pen/bGqjraR

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

Top Results From Across the Web

Bug – Report “Page Alignment” property missing whe...

The page alignment option is missing from reports that are published to the web (app.powerbi.com). And whatever option is set for this property ......

Bug Reports - AppGyver Community Edition - Canny

When compiling the application for android, it presented a bug in video playback, the icons seem to be misaligned here is the print...

Visual Bugs | Test IO Academy

Visual bugs relate to the graphical user interfaces of websites or apps, e.g.: Layout framework problems such as misaligned texts/elements. A Responsive Design ......

Ten simple rules for reporting a bug - PLOS

Introduction · Rule 1: Be patient · Rule 2: Check whether the bug is already fixed · Rule 3: Check for a previous...

Are Bug Reports Enough for Text Retrieval-based Bug ...

Second, we analyze bug report text with and without localization ... vocabulary mismatch (since matching terms between the code identifiers and the bug ......