[Feature Request] Dense (compact) mode

[husayt]

New Functionality

Currently some components have a dense setting which allows a more compact version of it. What would be cool if there would be a global setting on v-app or other layout element, which would make all children compact. Would be great if there would be levels of compactness, as just dense is not always good enough. Maybe dense can have density level value 0-5.

Improvements

Currently one has to make lot's of manual padding overrides to get this working.

Bugs or Edge Cases it Helps Avoid

It would allow far more new use cases

[Dylan-Chapman]

Second this, or something like this. In some situations I've had to override v-data-table th/td paddings when I need a more dense display. Would allow for stuff like gmail does with their display density setting ("Comfortable", "Cozy", "Compact").

[chewy94]

I am thinking that this deviates from material spec.

https://material.io/guidelines/search.html?q=dense

Any other thought @vuetifyjs/dev-team ?

[KaelWD]

Duplicate of #1846

Maybe dense can have density level value 0-5

That's too granular I think, just on/off would be fine.

[Dylan-Chapman]

Not sure this is a duplicate? Dense input fields doesn't encompass things like dense data tables like this request does.

[KaelWD]

Maybe, it doesn't mention any specific components though. Maybe I'll re-open it and edit to be just tables, as inputs are already covered.

[mr-july]

The specification about layout density in material design can be found here. Thus it would be very nice to see it implemented in Vuetify! ;-)

[ayZagen]

Having global setting would be nice. I don't know about material design specs but for vuetify I would also like to see options for more compact layouts. For ex. Mini variant for navigation bar has 80px width. In my opinion 40 or 60px is fair enough and has better looking. Navigation bar is only one example. I override styling many times for having more compact layouts.

[affansyed]

is this Feature targeted for any upcoming release?

[natxocc]

Yes please, one of the things take me back of Vuetify is the global size of components. It's very complex manage lot of data with these sizes. For the rest, vuetify is a greater framework!! Easy to code, semantic, very complet and nearly without bugs.

[natxocc]

Maybe, it doesn't mention any specific components though. Maybe I'll re-open it and edit to be just tables, as inputs are already covered.

What kind of inputs are covered? I can't see Select, textfields, Autocomplete, Combobox... have a dense mode. Only some of them have dense for the list, but not for the components

[douglasg14b]

This would be very much appreciated.

There is little or no control over component sizes, which really throws wrenches into the gears of some applications that need tight spacing and padding.

The same applies top buttons. There should be sizes smaller than just the small variant, lots of use cases for smaller buttons and FABs.

[johnleider]

This is something we plan to implement as part of an ongoing effort and has already been implemented for some components such as https://next.vuetifyjs.com/en/components/simple-tables#dense-table .

With that being said, it will not be a specific v2.0 task.

[CodeSkills]

@johnleider what about making some Issue/Board about statuses of dense modes, so we can track progress of what actually has dense, like a list of all components that are going to have it, that has it already and which are not going to have it ?

With that, it would be easier for ppl to contribute to it. :-)

[bagaskarala]

add icon dense mode not aligned to center

[someone1]

The vuetify roadmap mentions that 3.1 will support global options such as no-ripple and outline, maybe this feature fits on that list?

My use case for this would be to potentially set it on a parent component and have it take effect on all children. So this could be controlled from app wide to maybe just a specific form (collection of many vuetify components), or a table (a single vuetify component).

[johnleider]

We now have more density specs from Google than we had before. We are already tracking the comfortable and compact variants and they will be in v3. As noted above, we plan to make it global as well.

[johnleider]

When this issue was originally created we did not have dense options for almost anything. I'm going to consider the original request resolved in spirit as the explicit comfortable/compact density specs are being added as part of v3 anyways.

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

[douglasg14b]

@johnleider By chance do you have a link to the v3 spec or notes on the comfortable/compact density specs?