[Bug Report][4.0.1] Checkbox buttons in non-default density VList are misaligned
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Follow-on from https://github.com/vuetifyjs/vuetify/issues/22525, this aspect of that bug report has still not been addressed
Environment
Vuetify Version: 4.0.1
Vue Version: 3.5.29
OS: Windows 10 (current)
Steps to reproduce
- Have a VCheckboxBtn in a VListItemAction in the prepend slot of VListItem with density=compact or comfortable
Expected Behavior
The checkboxes stay aligned no matter the density
Actual Behavior
The VListItemAction margin does not change so the checkboxes are not in alignment with subheadings if the density is not the default:
.v-list-item-action--start {
margin-inline-end: 8px;
margin-inline-start: -8px;
}
Reproduction Link
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the VListItemAction styles and the .v-list-item-action--start rule shown in the report, then use the linked reproduction to compare compact and comfortable densities with the default. Done means VCheckboxBtn elements in a VListItemAction remain aligned with subheadings at every listed density.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100