Apr 4
Vue | Vuetify -> How to vertically align a <v-select> in a <v-data-table>cell
INTRO
I was running into a issue where I was trying to vertically align a <v-select> inside a <v-data-table> using Vuetify. Below is a quick tutorial on how I did it.
PROBLEM
The problem that I was running into, is that when I used a <v-select>, the element would align itself to the top of the table cell.
Unfortunately, I wanted the <v-select> to align itself in the middle of the table cell.
SOLUTION
I added the following parameters to my <v-select> element:
<v-select
hide-details
class="my-5">
</v-select>//my-5 is for a bit of margin to create some negative space around the <v-select> element
Below is a screenshot of the final result:
It's a pretty easy fix once you figure out that the reason why the element wasn't aligning itself properly. It was because of the way Vuetify leaves room for details such as form validation and other alerts to have room to display if necessary. In my particular use case, that type of whitespace was not needed.
Happy Coding.
