vuetify.jsvertical-alignment

Vertically aligning Vuetify VTextField


I often need to put Vuetify text field (or select/autocomplete) inside various bars Vuetify has (VAppBar, VToolbar, etc). Of course, I'd like for those fields to be vertically centered inside the bars. Problem is, these fields have spacing underneath for error/help messages and it pushes the entire component upwards and throws the aesthetic off. In this use case, that spacing is useless and no text will ever be displayed in there.

Is there a prop or slot modification, or another component that I can use for this purpose? Or do I have to build a custom solution using VInput?

I tried using solo or single-line, but it doesn't bring the effect that I want.


Solution

  • You can use the prop hide-details to hide the spacing underneath.