vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.83k stars 6.96k forks source link

[Feature Request] Allow dense on list groups activator #11540

Open salamwaddah opened 4 years ago

salamwaddah commented 4 years ago

Problem to solve

When making a list that mixes list item with list groups, list items CAN be dense but list groups can NOT. Making the list look messy because each items will be shorter than the group activator.

Proposed solution

Allow dense property on list groups activator or list groups. <v-list-group dense>

daniluk4000 commented 4 years ago

+1. I had to write Javascript function to handle this and add --dense class by myself

craigrileyuk commented 3 years ago

+1. I had to write Javascript function to handle this and add --dense class by myself

You just need to add class="v-list-item--dense" to the <v-list-group> element, and then insert the following in your css:

.v-list-item--dense > .v-list-group__header {
        min-height: 40px;
    }

Still a bit of a hack, but it saves using Javascript and getting reflow flashes.