[Bug Report][4.0.1] Vertical Divider Causes Grid to Overflow
Open
Nobody has claimed this yet.
C: VGrid
has workaround
T: documentation
working as intended
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Environment
Vuetify Version: 4.0.1
Vue Version: 3.5.29
OS: Windows 10 (current)
Steps to reproduce
- Add a vertical divider bewteen 2 v-cols
Expected Behavior
Vertical dividers should be able to be placed between V-Cols
Actual Behavior
Adding a vertical divider causes the grid to wrap
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
Toggling the version from 3.12.2 to 4.0.1 in the reproduction link illustrates the issue
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 linked Vuetify reproduction and compare the 3.12.2 and 4.0.1 versions, focusing on the v-divider placed between two v-cols. Trace the v-divider and grid behavior from that example, then verify that the vertical divider no longer causes the grid to wrap in the reproduction.
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
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100