Vue.js Developers
Published in

Vue.js Developers

Vue | Vuetify -> How to vertically align a <v-select> in a <v-data-table>cell


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.


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.


I added the following parameters to my <v-select> element:

//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.




Helping web professionals up their skill and knowledge of Vue.js

Recommended from Medium

Writer of the Week: Louis Petrik

React: In Short.

Elasticsearch In A Nutshell Part-3

RX Transformers: state in disguise

How to Melt a Webpage

Next Generation Virtual Scrolling

CircleCoin, new era for investment!

Setup logger for node-express app

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tony Mucci

Tony Mucci

Founder of My Company Tools • Co-Founder/Former CTO of Dree • Co-Founder of Eklect Enterprises. Opinions on this blog are my own.

More from Medium


Vue Reactivity System is more powerful than you think

Ref() vs Reactive() in Vue 3 — what’s the right choice?