Vuetify: [Feature Request] Dense inputs

[KaelWD]

The material design guidelines specify a dense variant of text fields that reduces the vertical spacing for forms with many inputs.
https://material.io/archive/guidelines/components/text-fields.html#layout-figure-caption-31

Right now, large forms have an excessive amount of whitespace and require a lot of scrolling, especially on mobile devices. This can be worked around by using single-line, but then you lose hints and floating labels.

I guess this would apply to all inputs, not just text fields.

[talski]

it will also make solo text-fields look better in a dense toolbar

https://codepen.io/talski/pen/OOzPZv?editors=1010

[dmcknight26]

Would be great if this could apply to select elements as well :-)

Selects already support a dense mode but that only affects the dropdown menu, which seems inconsistent. The dropdown menu options should match the size of the select display itself.

[albanm]

Does anyone have a workaround for this ? Something like a set of CSS rules that would work well in most cases.

[jrast]

@albanm
I created an example here: https://codepen.io/jrast/pen/wQboPR?editors=1100
It's just a first try, but the result looks better than without the additional CSS rule.

[albanm]

If I understand correctly your example it is adapted only for solo fields without helper text, etc.

It looks good, but I am looking for a dense but still complete version of the fields (exactly as in the material spec https://material.io/archive/guidelines/components/text-fields.html#text-fields-layout).

[jrast]

I was working on something like this, but never actually completed it. I used the following Stylus Code:

.dense-inputs {
  .v-input {
    font-size: 14px;

    &.v-text-field input {
      padding: 4px 0 2px 0;
      line-height: 1em;
    }

    .v-input__slot {
      margin-bottom: 4px;
    }

    &.v-input--hide-details {
      .v-input__slot {
        margin-bottom: 0
      }
    }
  }

  .v-text-field.v-text-field--solo {
    .v-input__control {
      min-height: 36px
    }
  }
}

Using this, I was able to add the "dense-inputs" class to the container which contained the inputs. But I only used it for text inputs. This code made it never to the live site, so there is certainly a lot to improve.

[albanm]

Thanks, I will have a look.

[bjensen]

@albanm any progress you are willing to share with the rest of us? :-)

[albanm]

Sorry but no, I didn't work on it.

[shaci]

Is there any progress?

[johnleider]

This is something I still want to do in order to meet MD2 spec (it was in MD1 as well). Unfortunately with as large as input fields are, this did not make the cut for v2's initial release. I'm going to move it back to a v2.x.x minor release. Thank you everyone for your patience.

[douglasg14b]

This change seems marginally breaking?

dense Used to apply to the elements of say an VAutocomplete, making them "denser". Now dense does that AND changes the input size.

The effect here is that if we want dense elements, but don't want the input itself to be dense and mis-aligned compared to other inputs, we can't do so easily.

Where there plans to replace the dense behavior on list elements with a different prop? So one prop isn't having two separate effects?

[kendallroth]

Is there any way to remove the dense prop from the menu list of a dense Select? Or even modify the list props of the menu?