Vuetify v-text field minimum height limitation?

Issue

i have a v-text-field and i'm trying to set the height to 37px but it seems like the minimum height has to be 49px. Is there a way to override this? I tried putting custom css but it seems like it works in the chrome inspector but i am not able to target it somehow

I have made a codepen with custom css styling applied but cannot seem to make it work: https://codepen.io/anon/pen/MMEmex

 <div id="app">
  <v-app id="inspire">
   <v-container>
   <v-text-field solo placeholder="trying to adjust the height" 
   height="37px"></v-text-field>
   </v-container>
  </v-app>
  </div>

   new Vue({
 el: '#app'
    })

When i apply this css on .v-input-slot in the chrome inspector tools, it seem to work

  .v-input__slot {
  min-height: auto !important;
 display: flex !important;
 align-items: center !important;
 }

Thank you in advance guys.

Solution

Your css selector should be:

 .v-text-field .v-input__control .v-input__slot {
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
  }

Demo on codepen

Answered By - ittus